DIV 浮点数:左边带有另一个带显示屏的 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中的内容高时，然后子div 的 #second 在 #first 下面开始一个新行。

我希望它们仅低于第二个div。

Answer 1

无需设置任何宽度或边距即可执行此操作的一种简单方法是触发#second的块格式上下文。

应用以下 CSS：

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

在 jsfiddle 观看演示

有关块格式上下文的详细信息，请参阅：
http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Answer 2

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

工作小提琴

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

#second{
    display: table-cell;
}

小提琴

Answer 3

使用内联块而不是浮点数。

尝试：

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

这将确保两者是分开的，只要它们彼此相邻，所以必须有一个宽度。

示例小提琴

编辑

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

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

示例小提琴 2