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:left自动使用块级流程授予元素。

如何让左栏上的第二个框位于第一个框下？

Answer 1

你自己已经回答了，有几种选择：

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

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

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

我尝试时效果很好。

P.S。请记住，在Firefox中，填充会增加div的宽度/高度，而在其他浏览器中则不会这样。

基本CSS：浮动左侧和内联div

3 个答案: