HTML 容器扩展以适应最大的 child

Question

我试图将 div 的样式设置为与其中最大的元素一样宽。这是我想出的，效果很好，但依赖于所有元素的大小相同(或至少识别最高的元素并向其添加额外的类)

.outer {
    background: silver;
    padding: 5px;
    display: inline-block;
}

.element {
    position: relative;
    height: 0;
}

.last {
    height: auto;
}

.small { font-size: xx-small; }
.large { font-size: xx-large; }

<div class='outer'>
        <div class="element">a pretty short one</div>
        <div class="element">quite a long long one here</div>
        <div class="element last">super short</div>
</div>

<hr>
<!-- perhaps easier to see without text overlapping -->
<div class='outer'>
        <div class="element">"""""""""""""""""""""""""</div>
        <div class="element">-------------</div>
        <div class="element last">.....................</div>
</div>

<hr>
<!-- layout breaks when element used to set height is not as tall as other elements -->
<div class='outer'>
        <div class="element small">a pretty short one</div>
        <div class="element large">quite a long long one here</div>
        <div class="element last">super short</div>
</div>

当高度也彼此不同且未知时，是否有任何方法可以使用 CSS 实现此目的？

Answer 1

.last 或 .element 不需要现有的 css。

<div>是 block 元素，这意味着默认情况下它将跨越 100% 的宽度。将外部元素设置为 display: inline-block 是在正确的道路上.然而，由于 .element div 也是 100% 宽度，它们仍然会换行。只需更改您的 .element css 以显示内联 block ，您应该会得到您正在寻找的结果。

.element {
    display: inline-block;
}