Question

JSFiddle：Example

我正在寻找一种容器div，其高度等于最高的孩子。

每个其他孩子的大小应该与容器的高度相符。

如果孩子超过宽度，我还需要容器水平滚动。

到目前为止，我尝试过使用inline-block和float：left但是没有得到我想要的结果。儿童的设置高度：100％也没有达到预期的效果。在容器上使用overflow：auto仍将最后一个元素包装到下一行。

我非常有信心，我可以通过抓住最高的孩子的高度并适当调整大小并在容器上设置固定高度来实现这一点。我宁愿不使用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;
}

没有固定高度的水平滚动div，所有包含的div都是最高的孩子的高度

1 个答案: