如何用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

我正在修改我的答案：How to make an inline-block element fill the remainder of the line?

• 仅展开#sideBar。
• 你不能真正调整这种技术，以便以后拥有相同的高度列，所以这就是我在回答之前询问的原因。 （嗯，你可以，但你需要使用background-image faux columns）

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

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

---

Why did I replace margin-left: 100px with overflow: hidden on #mainContent?

Answer 3

使用向左或向右浮动并不重要。 你有宽度为600px的包装。 当您对侧边栏使用float并包含在包装内部时，必须确保侧边栏的宽度并包含（包括边距和填充）等于或小于600px。 如果不是，第二个元素将低于第一个元素。 希望这有助于^^

Answer 4

并排使用display:flex两个div浮动

#wrapper{
width: 600px;
display:flex;
}
#sideBar{
display:inline-flex;
width: 25%;
}
#mainContent{
width:75%;
flex:1;
}