基本 CSS：向左浮动和内联 div答案

【问题标题】：Basic CSS: Float left and inline divs基本 CSS：向左浮动和内联 div
【发布时间】：2012-06-10 16:49:26
【问题描述】：

我有 captured an illustration of a CSS two-column layout I've set up，同时对橙色容器使用以下规则：

.embedded_post{
    float: left;
    width: 46%;
    margin-right: 20px;
    padding: 10px;
    display: inline-block;
}

可以看出，右列的第二个橙色容器阻止了左列的第二个橙色容器浮动到左上角的框。

这显然是因为float:left 自动授予元素具有块级流。

如何让左列的第二个框位于第一个框的下方？

【问题讨论】：

如果你只使用display:inline会发生什么？
试过了，同样的。 float:left 将推翻这一点。

标签： css layout flow

【解决方案1】：

你能把你的列包装在另一对 div 中，这样在右列中浮动不会影响在左列中浮动吗？

<div id='left_column'>
  <div class='embedded_post'></div>
  <div class='embedded_post'></div>
</div>

<div id='right_column'>
  <div class='embedded_post'></div>
  <div class='embedded_post'></div>
  <div class='embedded_post'></div>
</div>

css:

#left_column, #right_column {
  float:left;
}

【讨论】：

【解决方案2】：

你自己回答了，有两种选择：

通过为div 元素授予内联级别流来欺骗自己，即指定display: inline（不推荐）。
将标记更新为更具语义性并更改布局以符合所需的结果，例如将 divs 替换为 spans（首选）。

【讨论】：

【解决方案3】：

左边第二个 div 的宽度比其他 div 小，这可能与它有关。此外，与您的（所需）结构和margin-right 的组合不是我会这样做的。事实上，margin-right 可能会根据 embedded_post div 的父 div 的 with 来破坏您的结构并导致定位问题。

我试了一下，效果很好。

附言请记住，在 Firefox 中，填充 会增加 div 的宽度/高度，而在其他浏览器中不会发生这种情况。

【讨论】：