Question

我正在尝试在每个浏览器上创建一个看起来相同的网站。我使用13px的字体，每个边距和填充被定义为像素。在这里，我创建了3个div，使得leftpart，middlepart和rightpart都垂直对齐。这三个div包裹在“上层”-div中。在我的桌面（IE和Chrome）上，它看起来不错，并且对齐。但是当我想在我的手机上查看我的网站时，中间和右边部分比左边高。是否有一个我忘记定义的属性，在每种类型的浏览器中都有不同的默认设置？

非常感谢你。这是我正在使用的代码：

<div class="left">

<form method="post" action="small.php">
<input type="hidden" name='form' value='wasSubmited' />
<input type="submit" name="1" value="Attempt" style="margin-top:33px">
<input type="submit" name="2" value="Attempt" style="margin-top:33px">
<input type="submit" name="3" value="Attempt" style="margin-top:20px">
<input type="submit" name="4" value="Attempt" style="margin-top:20px"> 
</form>
</div>

<div class="middle">
<p style="margin-top:25px">Bla bla bla Bla bla bla Bla bla bla Bla bla bla</p>
<p style="margin-top:24px">Bla bla bla</p>
<p style="margin-top:22px">Bla bla bla</p>
<p style="margin-top:22px">Bla bla bla</p>
</div>

<div class="right">
<p style="margin-top:46px"><?php echo max(0,round($chance1)); ?>%</p>
<p style="margin-top:24px"><?php echo max(0,round($chance2)); ?>%</p>
<p style="margin-top:22px"><?php echo max(0,round($chance3)); ?>%</p>
<p style="margin-top:22px"><?php echo max(0,round($chance4)); ?>%</p>
</div>

CSS：

div.upper {
width:850px;
position:absolute;
margin:0px auto;
background-color:#e7eef9;
left:75px;
top:50px;
border:1px solid;
height:477px;
overflow:hidden;
}

div.left {
width:70px;
margin:0px;
float:left;
padding:0px 20px 0px 40px;
text-align:left;
height:320px;
padding-top:50px;
}

div.middle {
width:300px;
margin:0px;
float:left;
text-align:left;
height:320px;
padding-top:50px;
}

div.right {
width:100px;
margin:0px;
float:right;
background-color:#d7e3f5;
height:320px;
padding-top:50px;
}

Answer 1

我怀疑你的问题来源与你的css中的这一行有关：

padding:0px 20px 0px 40px;

在div.left {选择器下。

中间和右边的div只有顶部填充，这解释了为什么它们的显示方式不同。

Answer 2

中间和右侧部分变得比左侧更高，因为当屏幕较小时，div被推下，因为没有足够的空间。您可以通过将所有内容放在容器中来解决此问题。像这样：

<div class="container"> <!-- use a container -->
<div class="left">

<form method="post" action="small.php">
<input type="hidden" name='form' value='wasSubmited' />
<input type="submit" name="1" value="Attempt" style="margin-top:33px">
<input type="submit" name="2" value="Attempt" style="margin-top:33px">
<input type="submit" name="3" value="Attempt" style="margin-top:20px">
<input type="submit" name="4" value="Attempt" style="margin-top:20px"> 
</form>
</div>

<div class="middle">
<p style="margin-top:25px">Bla bla bla Bla bla bla Bla bla bla Bla bla bla</p>
<p style="margin-top:24px">Bla bla bla</p>
<p style="margin-top:22px">Bla bla bla</p>
<p style="margin-top:22px">Bla bla bla</p>
</div>

<div class="right">
<p style="margin-top:46px"><?php echo max(0,round($chance1)); ?>%</p>
<p style="margin-top:24px"><?php echo max(0,round($chance2)); ?>%</p>
<p style="margin-top:22px"><?php echo max(0,round($chance3)); ?>%</p>
<p style="margin-top:22px"><?php echo max(0,round($chance4)); ?>%</p>
</div>
</div>

CSS：

div.upper {
width:850px;
position:absolute;
margin:0px auto;
background-color:#e7eef9;
left:75px;
top:50px;
border:1px solid;
height:477px;
overflow:hidden;
}

div.left {
width:70px;
margin:0px;
float:left;
padding:0px 20px 0px 40px;
text-align:left;
height:320px;
padding-top:50px;
}

div.middle {
width:300px;
margin:0px;
float:left;
text-align:left;
height:320px;
padding-top:50px;
}

div.right {
width:100px;
margin:0px;
float:right;
background-color:#d7e3f5;
height:320px;
padding-top:50px;
}

.container {
  width: 1000px; /*or whatever width you want, but the container has to be at least as big as the total width of everything inside*/
}

什么定义所以网站在移动设备上看起来一样

2 个答案: