Question

我的JSFiddle：

我的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列的内容应该是动态的，这意味着，高度应该自动变为最大高度。我们永远不知道3列中哪一列是最高的，所以这也应该是动态的。

我目前的解决方案是JSFiddle，我尝试了其他类似“display：table”的内容，但这更糟糕......

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

Answer 1

这就是你要找的东西吗？

<强> JSFIDDLE

请记住默认情况下display:inline-block是基线，所以你必须设置它vertical-align:top，加上内联块创建空格，你可以在这里看到解决方案：

<强> INLINE-BLOCK FIXES

<强>更新

现在我仔细阅读了你的问题，我知道你想要3列相同的高度，所以我给你一些方法来实现这个目标：

<强> Fluid Width Equal Height Columns

希望它有所帮助！

Answer 2

这是一个简单的jQuery脚本解决方案：Example

首先，我为每个部分提供了一个课程.column，以便更轻松地定位它们。

然后我得到每个元素的高度，并将最高高度应用于所有元素。

heightArrayHeading = [];
$('.column').each(function() {
    $(this).css('height', '');
    heightArrayHeading.push($(this).outerHeight());
});

$('.column').css('height', Math.max.apply(Math, heightArrayHeading));

最后，我将.column vertical-align:top;放在最顶层。

Answer 3

这是纯CSS solution

HTML结构是一样的，只是我改变了CSS中的几行。我已将 #sidebar 显示分配给表格。

然后，将＃sidebar＆gt; div 指定为显示作为 table-cell ，使所有列的高度相等。为了改进表单UI，我添加了这段代码

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

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

希望这会有用

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

3 个答案: