css - float DIV 在高度变化时破坏设计

Question

我有几个 float DIV，我想将它们并排对齐。这是它目前的样子:http://jsfiddle.net/D8DdJ/1/

现在，只要一个 DIV 的内容超出了高度，就会破坏设计，如下所示:http://jsfiddle.net/D8DdJ/2/

所以我想让 DIV 彼此相邻对齐，即使其中一个的高度较大。 如何实现？我知道我可以为 inner 类设置一个固定的 height，但我无法预测每个 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 而不是 float .inner Fiddle