css - 基本 CSS：向左浮动和内联 div

Question

我已经捕获了我设置的 CSS 两列布局的插图，同时对橙色容器使用以下规则：

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

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

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

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

Answer 1

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

当我尝试时它工作正常。

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

Answer 2

您可以将列包装在另一对 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;
}

Answer 3

你自己回答了，有几个选择：

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