Question

我有几个浮动DIV，我想彼此并排排列。目前的情况如下：http://jsfiddle.net/D8DdJ/1/

现在，只要一个DIV的内容延伸到高度，它就会破坏设计，如下所示：http://jsfiddle.net/D8DdJ/2/

所以我想让DIV彼此相邻，即使其中一个DIV的高度更大。 我如何实现这一目标？我知道我可以将固定的height设置为inner类，但我无法预测每个DIV的内容，因为它们是用户提交的。

我的CSS：

.container {
    border-top: 1px solid #F4F5F5;
    float: left;
    margin-bottom: 15px;
    padding-top: 15px;
    width: 578px;
}

.inner {
    border: 1px solid #F4F5F5;
    float: left;
    margin: 5px;
    padding: 5px;
    width: 170px;
}

.inner p {
    font-size: 12px;
    font-weight: bold;
    line-height: 13px;
    padding-bottom: 4px;
    text-align: center;
}

和HTML：

<div class="container">

   <div class="inner"><p>Lorem Ipsum</p><img width="170" height="110" src="http://www.toyarena.com/images/sonic.jpg"></div>

   <div class="inner"><p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p><img width="170" height="110" src="http://www.toyarena.com/images/sonic.jpg"></div>

   <div class="inner"><p>Lorem Ipsum</p><img width="170" height="110" src="http://www.toyarena.com/images/sonic.jpg"></div>

   <div class="inner"><p>Lorem Ipsum</p><img width="170" height="110" src="http://www.toyarena.com/images/sonic.jpg"></div>

   <div class="inner"><p>Lorem Ipsum</p><img width="170" height="110" src="http://www.toyarena.com/images/sonic.jpg"></div>

   <div class="inner"><p>Lorem Ipsum</p><img width="170" height="110" src="http://www.toyarena.com/images/sonic.jpg"></div>

</div>

编辑：此外，一行中的DIV数量稍后会更改，容器将设置为 100％宽度，因此添加clear:both当不知道行的长度时，每一行都不起作用......

Answer 1

可以使用display:inline-block代替浮动.inner Fiddle

Answer 2

这是你想要的吗？

http://jsfiddle.net/D8DdJ/8/

.container {
    border-top: 1px solid #F4F5F5;
    float: left;
    margin-bottom: 15px;
    padding-top: 15px;
}

.inner {
    border: 1px solid #F4F5F5;
    display: inline-block;
    margin: 5px;
    padding: 5px;
    width: 170px;
}

我刚删除了“float：left;”并添加了“display：inline-block;”我也删除了容器的宽度。

Answer 3

将.inner切换到display: inline-block;（移除浮动）并获得奖励积分，在.inner上抛出vertical-align: top;以使其看起来更漂亮，IMO。

这是更新后的fiddle.

浮动DIV在高度变化时打破了设计

3 个答案: