如何用css正确浮动两根柱子

Question

这是我很久以前学到的东西之一,从来没有想过我是否真正以正确的方式做到这一点.

假设我们有这样的结构:

<div id="wrapper">
  <div id="sideBar"></div>
  <div id="mainContent"></div>
</div>

我们也说它wrapper的宽度为600px.

我应该漂浮sideBar left,mainContent right还是应该漂浮它们left？

另外,如果我设置一个固定的宽度,sideBar我该如何mainContent填充剩余的空间,类似于表的工作方式？如果我设置mainContent为display:inline-block并向width:100%下移动到下一行:/

注意:在我的特定场景中,我不想使用表格.

Answer 1

你display:block一起float:left漂浮div彼此相邻.

查看http://jsfiddle.net/FhL4u/2/上的工作示例

如果只知道第一个div宽度,则使mainContent填充其余空间,然后在sideBar和mainContent ex上使用百分比:20%80%而不是使用固定宽度.否则,您将需要一个JavaScript解决方案来实现跨浏览器兼容性.

在http://jsfiddle.net/FhL4u/3/查看jQuery解决方案

Answer 2

我在这里修改我的答案:如何使内联块元素填充该行的其余部分？

• 只有#sideBar浮动.
• 你不能真正调整这种技术,以便稍后有相同的高度列,所以这就是我在回答之前询问的原因.(嗯,你可以,但你需要使用一个background-image用于人造柱)

请参阅:http://jsfiddle.net/qx32C/37/

#wrapper {
    overflow: hidden; /* clear the float */
}
#sideBar {
    width: 100px;
    float: left;
    background: #f0f
}
#mainContent {
    overflow: hidden;
    background: #ccc
}

为什么我更换margin-left: 100px用overflow: hidden的#mainContent？