1

我想为我的网站上的内容设置 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>
4

2 回答 2

1

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

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

于 2013-11-06T20:03:48.773 回答
0

您可以使用一些东西...显示块内联功能，或者您可以将图片浮动到右侧。或者你可以使用表格，但我个人讨厌那些。

    #sidebar {
    margin-top:80px;
    float:right;
    width:400px;
    margin-left: 5%;

确保总宽度不超过父容器的宽度。您可能还需要在图片右侧进行一些填充。

于 2013-11-06T20:07:39.557 回答