当它们不总是在同一条线上时，使多个高度相等的div

Question

我已经尝试了一下，我遇到了麻烦。

我有6个div个标题和列表。理想情况下，我希望根据需要排列这些，最多3行任意一行，因此潜在的布局为3x2,2x3或6x1。

我目前遇到的问题是我无法让div正确匹配他们的高度。

我遇到的问题：

• 我无法使用display:table-cell，因为这意味着我有固定行。
• 我尝试使用固定高度，但这会导致奇数偏移，如第二张图片。

我有一个jsfiddle setup with the code，但下面也是。

我怎样才能（最好只使用CSS）让这些div具有相同的高度和宽度，同时垂直排列正确？

CSS（从LESS生成，无ul和h2样式）：

div div {
        display:inline-block; 
        border:1px solid gray;
        padding:5px;
        margin:10px;
        width:20%;
        height:100%;
        border-radius: 8px;
}
h2 {
    margin:0px;padding:0px;
    font-size:12pt;
    text-align:center;
}

HTML：

<div id="homeFaq">

    <div>
        <h2>What is metadata?</h2>
        <ul>
            <li>Ipsum ipsum</li>
            <li>Ipsum ipsum</li>
            <li>Ipsum ipsum</li>
        </ul>
    </div>

    <div>
        <h2>What is [BRAND]?</h2>
        <ul>
            <li>Ipsum ipsum</li>
            <li>Ipsum ipsum</li>
            <li>Ipsum ipsum</li>
        </ul>
    </div>
    <div>
        <h2>How can I get data?</h2>
        <ul>
            <li>Ipsum ipsum</li>
            <li>Ipsum ipsum</li>
            <li>Ipsum ipsum</li>
        </ul>
    </div>
    <div>
        <h2>How can I add content?</h2>
        <ul>
            <li>Ipsum ipsum</li>
            <li>Ipsum ipsum</li>
            <li>Ipsum ipsum</li>
        </ul>
    </div>
    <div>
        <h2>Lorum Lorum?</h2>
        <ul>
            <li>Ipsum ipsum</li>
            <li>Ipsum ipsum</li>
            <li>Ipsum ipsum</li>
        </ul>
    </div>
    <div>
        <h2>Lorum Lorum?</h2>
        <ul>
            <li>Ipsum</li>
            <li>Ipsum</li>
            <li>Ipsum</li>
        </ul>
    </div>
</div>

http://jsfiddle.net/VNcaH/

Answer 1

更新js小提琴：http://jsfiddle.net/nikhilvkd/VNcaH/4/

您可以在min-height和h2代码中使用ul值。这样做会很好!!!

div div h2 {
  min-height: 30px;
} 
div div ul {
  min-height:80px;
}

Answer 2

您可以使用固定高度和垂直对齐顶部，如下所示

div div {
        display:inline-block; 
        border:1px solid gray;
        padding:5px;
        margin:10px;
        width:20%;
        height:150px;
        border-radius: 8px;
    vertical-align:top;
};

Fiddle Demo