html - 将列与 HTML 和 CSS 结合使用

Question

我想在我的网站上有 2 个不同的栏目，我希望它们是这样的:

http://i.stack.imgur.com/V4uX2.jpg

在我的电脑显示器上是这样的，但是在我的手机上是这样的:

http://i.stack.imgur.com/H7CNe.png

如您所见，我希望两侧始终紧挨着，而不是像在我的手机上那样一个在另一个下面。

CSS

#leftSide {
margin-top:80px;
margin-left:200px;
float:left;
width:400px;
}

#rightSide {
margin-top:80px;
margin-left:10px;
float:left;
width:400px;
}

HTML:

<div id="leftSide">
</div>
<div id="rightSide">
</div>

Answer 1

检查您手机的分辨率。您的屏幕宽度可能小于 800 像素，而您的内容需要大于 800 像素才能显示。

此外，对于 2 列显示，最好的方法是在两个 div 上使用 float left 和 right。您应该阅读响应式 CSS，它可以根据设备宽度对 div 的宽度进行样式化。