html - 没有固定高度的水平滚动 div，所有包含的 div 最高 child 的高度

Question

JSFiddle:Example

我正在寻找一种方法来使容器 div 的高度等于其最高的子级。

每个其他子项的大小都应调整为容器的高度。

如果子元素超出其宽度，我还需要容器水平滚动。

到目前为止，我已经尝试使用 inline-block 和 float: left 但没有得到我想要的结果。设置 height: 100% 对 child 也没有达到预期的效果。在容器上使用 overflow: auto 仍然将最后一个元素包装到下一行。

我非常有信心，我可以使用 JavaScript 来完成此操作，方法是获取最高 child 的高度并适当调整大小并在容器上设置固定高度。不过，我宁愿不使用 JavaScript，而且我认为这可能仅通过 CSS 技巧实现。

HTML

<div>
    <div class='boxed'><ul><li>1</li></ul></div>
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div>
</div>

<div class='container'>
    <div class='boxed'><ul><li>1</li></ul></div>
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div>
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div>
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div>
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div>
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div>
    <div class='boxed'><ul><li>1</li><li>2</li><li>3</li></ul></div>
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div>
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div>
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div>
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div>
    <div class='boxed'><ul><li>1</li><li>2</li></ul></div>
</div>

CSS

.boxed { display: inline-block; border: 1px solid black; }

.container { overflow-x: auto; }

Answer 1

对于第一个问题，您可以使元素 display:table-cell 而不是 inline-block。这将导致它们采用最高兄弟元素的高度。我还建议将 vertical-align:bottom 添加到元素中，以便将它们对齐到父元素的底部。如果这不是您想要的行为，还有 middle 和 top。

UPDATED EXAMPLE HERE

.boxed {
    border: 1px solid black;
    display:table-cell;
    vertical-align:bottom;
}

对于第二个问题，只需在父元素中添加white-space:nowrap即可防止子元素换行。当子元素超过父元素的宽度时，将创建一个水平滚动条。

.container {
    border:1px solid red;
    white-space:nowrap;
    overflow-x: auto;
}