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>是一个块元素，这意味着默认情况下它将跨越100％宽度。你是在正确的道路上将外部元素设置为display: inline-block。但是，由于.element div的宽度也是100％，因此它们仍然会突破到新的一行。只需将.element css更改为显示内联块，您就可以获得您正在寻找的结果。

.element {
    display: inline-block;
}

Answer 2

可能有效的是将您的 width 更改为 min-width，然后如果 width 大于 min-width 约束，它将扩展以填充其余内容。

HTML容器扩展以适合最大的孩子

2 个答案: