什麼定義如此網站看起來一樣在移動

Question

我試圖創建一個網站，在每個瀏覽器上看起來都一樣。 我使用13px的字體，並且每個邊距和填充都定義爲像素。 這裏我創建了3個div，這樣左邊，中間和右邊都是垂直對齊的。這3個div包裹在「upper」-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*/ 
}