Question

我有一个未知数量的div，每个div都有未知数据（未知高度）这些div具有相同的宽度，即300px。我需要一个接一个地放置它们，所以我得到一个网格作为结果。每行中的所有div应该具有相同的高度，因此每行都是平的，整个网格看起来都很好。

我当前的版本不起作用。它使网格具有不同的高度。我想通过javascript设置所有高度。

<style>
    .inline {
        width:300px;
        display:inline-block;
        vertical-align:top;
    }
</style>

    <div class="inline">
        Some Text
    </div>
    <div class="inline">
        Some Text
        Some More Text
    </div>
    <div class="inline">
        Some Text
        Some More Text
        Some More Text
    </div>
    <div class="inline">
        Some Text
        Some More Text
        Some More Text
        Some More Text
        Some More Text
    </div>
    <div class="inline">
        Some Text
        Some More Text
    </div>
    <div class="inline">
        Some More Text
        Some More Text
        Some Text
    </div>

Answer 1

您可以使用CSS属性 display：table-cell

http://jsfiddle.net/AGjBM/

<style>
    div {
        display: table-cell;
        border: 1px solid;
    }
</style>

    <div class="table-cell">
        Some Text
    </div>
    <div class="table-cell">
        Some Text<br>
        Some More Text
    </div>

Answer 2

对于Position is Everything上的等高列，这是一个不错的策略，看起来它会做你想要的。如果没有，那么你可以在你最喜欢的搜索引擎的帮助下找到许多其他技术。

一个高度未知且相等的div网格

2 个答案: