Question

请参阅http://jsfiddle.net/ttsop213/

<div id="outer">
<div class="innerdivs" id="inner1">this has small text</div>
<div class="innerdivs" id="inner2">smallest text</div>
<div class="innerdivs" id="inner3">I think this should have a pretty large text</div>
<div class="innerdivs" id="inner4">How about making this the one with the largest text and find out how other sibling divs behave. I think something might just work, and something won't.. let us run it!    </div>
</div>

要求是使所有DIV具有相同的高度。请确保这些内部DIVS不应该有任何滚动条，并且3 DIVS应该采用最大DIV的高度。请仅在CSS中进行更改。

Answer 1

使用display: inline-block代替float:left将所有内容保留在同一行并填充父级。

#outer {
    display: inline-block;
    border: 4px solid darkgreen;
    border-radius: 10px;
}
.innerdivs {
    display: inline-block;
    margin: 5px;
    border-radius: 3px;
    background: #ff3;
    width: 100px;
}

Answer 2

使用Display：table;对于具有类＆＃34;外部＆＃34;的外部div。使用Display：table-cell;对于正在上课的内部div而言，他们正在上课。并删除＆＃34; float：left＆＃34;属于＆＃34; innerdivs＆＃34;。

CSS - 制作相同高度的兄弟DIV

2 个答案: