95

div黒い外側のが、そのdiv中に浮かんでいる s をラップするようにします。自動的にそのコンテンツの高さになりたいので、 id で使用style='height: 200pxしたくありません (たとえば、フローティングs)。divouterdivdiv

<div id='outerdiv' style='border: 1px solid black;background-color: black;'>
<div style='width=300px;border: red 1px dashed;float: left;'>
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

<div style='width=300px;border: red 1px dashed;float: right;'>
    <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>

これを達成する方法は？

4

7 に答える 7

170

outerdivのCSSをこれに設定できます

#outerdiv {
    overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}

で最後に要素を追加することによってもこれを行うことができますclear: both。これは通常、JS (良い解決策ではありません) または:afterCSS 疑似要素 (古い IE では広くサポートされていません) を使用して追加できます。

問題は、フローティングされた子を含むようにコンテナーが自然に拡張されないことです。最初の例を使用する場合は、親要素の外側に子要素がある場合、それらが非表示になることに注意してください。プロパティ値として 'auto' を使用することもできますが、これにより、要素が外部に表示される場合にスクロールバーが呼び出されます。

親コンテナをフローティングすることもできますが、デザインによっては、これが不可能/難しい場合があります。

于 2009-04-30T00:44:10.263 に答える
3

jQuery を使用します。

親の高さ = 子のオフセット高さを設定します。

$(document).ready(function() {
    $(parent).css("height", $(child).attr("offsetHeight"));
}
于 2010-12-20T12:09:59.233 に答える
1

使用するclear: both;

これを理解するために1週間以上費やしました！

于 2013-02-07T20:30:15.087 に答える