在 HTML 和 CSS 中使用列答案

【问题标题】：Using Columns with HTML and CSS在 HTML 和 CSS 中使用列
【发布时间】：2013-11-06 19:58:07
【问题描述】：

我希望我的网站上的内容有 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>

【问题讨论】：

您是否尝试过将左侧边距移除到侧边栏并使用 float:right 而不是 left？

标签： html css two-columns

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：