如何正确浮动两列与css并排

Posted 2023-03-06

【中文标题】如何正确浮动两列与css并排

【英文标题】：How to properly float two columns side by side with css

【发布时间】：2011-08-01 04:32:18

【问题描述】：

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

假设我们有这样的结构：

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

假设wrapper 的宽度为600px。

我应该浮动sideBarleft和mainContentright，还是应该同时浮动left？

另外，如果我为sideBar 设置了一个固定宽度，我怎样才能让mainContent 填充其余空间，类似于表格的工作方式？如果我将mainContent 设置为display:inline-block 和width:100%，它会向下移动到下一行：/

注意：在我的特定场景中，我不想使用表格。

【问题讨论】：

列必须等高吗？

@thirtydot，在这个例子中，没有。

【参考方案1】：

你 display:block 和 float:left 一起浮动 div 彼此相邻。

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

如果只知道第一个 div 宽度，要让 mainContent 填满其余空间，请在 sideBar 和 mainContent 上使用百分比，例如：20% 80% 而不是使用固定宽度。否则您将需要一个 javascript 解决方案来实现跨浏览器兼容性。

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

【讨论】：

半相关文章：blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block。请小心，因为旧浏览器（如 IE7 或 Firefox 2）不能很好地处理 inline-block。您也可以只浮动您的内容并在包装元素中使用背景，以使其看起来像列的高度相同。

一些批评：你不需要 jQuery（矫枉过正..）来做到这一点，看我的回答。此外，每当您使用display: inline-block 时，您至少应该提及一个事实，即它在没有 hack 的情况下无法在 IE7 中工作（请参阅@Guttsy 链接的文章）。最后，第一个演示没有（引用问题）"fill up the rest of the space similar to how a table works"。编辑：另外，你有position:inline-block - 修复为display: inline-block。

我将 inline-block 更改为 block。阅读上面的评论。

我明白了。好吧，您可能想编辑答案的第一行，它仍在谈论inline-block。

我觉得我现在在挑剔你（对不起！），但是：如果你使用float: left（或right..），那么display: block 是“自动设置的”。您不需要显式添加它。

【参考方案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?

【讨论】：

Margin-left 不是一个灵活的解决方案。

【参考方案3】：

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

【参考方案4】：

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

#wrapper 
    width: 600px;
    display: flex;

#sideBar 
    display: inline-flex;
    width: 25%;

#mainContent 
    width: 75%;
    flex: 1;