DIV浮动:左侧与另一个具有display:inline-block的div换行

Question

我有以下代码;

<div id="first" style="float: left">
</div>
<div id="second">
    <div id="1" style="display: inline-block;">
    </div>

    <div id="2" style="display: inline-block;">
    </div>
    ......
    <div  id= "n" style="display: inline-block;">
    </div>
</div>

问题在于，当#second中的内容高度超过#first中的内容高度时， #second中的子div会开始一行新的排列，出现在#first下方。

我希望它们只出现在第二个div下面。

- JDT

---

请提供一个jsfiddle的示例。 - Jakub Matczak

请使用 display: inline-block 替换 float CSS 属性，应用于第一个 div。 - Mr_Green

jsfiddle的示例是http://jsfiddle.net/pWjAL/。我想让“second”中的所有div都像表格单元格一样一个接一个地排列。 - JDT

Mr_Green尝试使用display: inline-block，但在Firefox中显示的结果很奇怪，div中的内容首先向右移动。 - JDT

Answer 1

一种简单的方法是在#second上触发块格式化上下文，而无需设置任何宽度或边距。

应用以下CSS：

#second {
    border: 1px solid blue;
    overflow: auto;
}

请查看在jsfiddle上的演示。

如需了解有关“块格式化上下文”的更多信息，请参见以下链接：http://www.w3.org/TR/CSS2/visuren.html#block-formatting。

- Marc Audet

---

酷！:) 我不知道这个。 - Mr_Green

@Mr_Green 这是一个非常有用的功能，特别是在处理浮点数时。 - Marc Audet

Answer 2

如果您知道第一个 div 的最大宽度/宽度，则将该宽度值应用为第二个 div 的 margin-left。

工作 Fiddle

更新：（如果您不知道宽度）

#second{
    display: table-cell;
}

代码片段

- Mr_Green

---

这解决了问题，但实际上第一个 div 的宽度可能会有所不同。 - JDT

Answer 3

使用inline-block代替float。

尝试：

#first, #second{
    display: inline-block;
    vertical-align: top;
}

只要它们紧挨在一起，那么这将确保它们分开，因此必须有一个宽度。

例子 FIDDLE

编辑

或者是的，如果你不知道宽度

#first, #second{
    display: table-cell;
}

示例 FIDDLE 2

- lee_gladding

---

如果你尝试这样做，你会发现#second在#first下面开始。在这种情况下，#second会扩展到填充页面的宽度，从而强制换行。 - Marc Audet

是的，抱歉 - 要使其工作，您需要知道宽度。对于未知宽度，您需要使用table-cell。 - lee_gladding