定义什么才能让网站在移动设备上看起来一样
定义什么才能让网站在移动设备上看起来一样
提问于 2015-01-21 07:32:17
我正在尝试创建一个在每个浏览器上看起来都一样的网站。我使用13px的字体，每个边距和填充都被定义为像素。这里我创建了3个div，这样左边的部分，中间的部分和右边的部分都垂直对齐。这3个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;
}回答 2
Stack Overflow用户
发布于 2015-01-21 09:58:06
我怀疑问题的根源与css中的这一行有关：
padding:0px 20px 0px 40px;在div.left {选择器下。
中间和右边的div只有顶部填充，这解释了为什么它们的显示方式不同。
Stack Overflow用户
发布于 2015-01-21 10:54:03
中间和右边部分变得比左边高，因为当屏幕变小时，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*/
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28057147
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号