3

我有以下代码;

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

问题是当in 的内容#second比in 的内容高时#first,那么childdiv的in 在#second下面开始新的一行#first

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

4

3 回答 3

5

一种无需设置任何宽度或边距的简单方法是触发#second.

应用以下 CSS:

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

在jsfiddle上查看演示

有关块格式化上下文的更多信息,请参阅:
http ://www.w3.org/TR/CSS2/visuren.html#block-formatting

于 2013-09-16T12:48:10.883 回答
1

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

工作小提琴

更新:(如果您不知道宽度

#second{
    display: table-cell;
}

小提琴

于 2013-09-16T12:40:34.263 回答
0

使用 inline-block 而不是 float。

尝试:

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

只要它们彼此相邻,这将确保两者是分开的,因此必须具有宽度。

示例小提琴

编辑

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

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

示例小提琴 2

于 2013-09-16T12:51:09.527 回答