html - CSS 3动态列，相同宽度对齐顶部

我的JSFiddle：

http://jsfiddle.net/3YGdL/

我的CSS：

#sidebar {
    width: 100%;
    background-color: blue;
}

#sidebar div {
    width: 33%;
    display: inline-block;
}

#sidebar-left {
    background-color: green;
}

#sidebar-center {
    background-color: red;
}

#sidebar-right {
    background-color: yellow;
}

#sidebar li {
    list-style: none;
}

我的问题：

我希望一行中的3列具有完全相同的宽度和对齐的顶部。这三列的内容应该是动态的，这意味着高度应自动更改为最大高度。我们永远不知道3列中哪一列是最高的，因此这也应该是动态的。

我当前的解决方案是在JSFiddle中，我尝试了其他类似“ display：table”的方法，但情况更糟...

I've tried this, but it didn't work for me...

最佳答案

这是纯CSS solution

HTML的结构是相同的，只是我在CSS中更改了几行。我将#sidebar显示分配给表格。

然后，将#sidebar> div分配为与所有列相同高度的表格单元。为了改善表单用户界面，我添加了以下代码

div.form-group input, div.form-group textarea {
    clear:both !important;
    float:none;
    margin:5px;
    display:block;
}

有关更多详细信息，请参阅此URL

希望这会有用

关于html - CSS 3动态列，相同宽度对齐顶部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22646911/