css - 基本 CSS : Float left and inline divs

Question

我已经 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 到左上角的框。

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

如何将左栏中的第二个框置于第一个框的下方？

Answer 1

你能不能把你的列包裹在另一对 div 中，这样 float 在右边的列就不会影响左边的 float 了？

<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;
}