外側divを浮動小数点数と同じ高さにする

Question

アウターdivは黒色で、その内にはdivが入ります。私はのをouterdivというIDで使用したいと思っています。そのコンテンツの高さを自動的に（浮動小数点のdiv）にしたいからです。これを達成するための方法

<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> 

？

Answer 1

あなたはまた、clear: bothで最後に要素を追加することによってこれを行うことができ、この

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

にouterdivのCSSを設定することができます。 JS（良い解決策ではない）または:after CSS疑似要素（これは古いIEでは広くサポートされていません）を使って、これを正常に追加できます。

問題は、コンテナが浮動小数点を含むように自然に拡張されないことです。最初の例を使用して警告されます。親要素の外側に子要素がある場合、それらは隠されます。また、プロパティ値として 'auto'を使用することもできますが、外部に要素がある場合はスクロールバーが呼び出されます。

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

Answer 2

あなたはhttp://www.sitepoint.com/simple-clearing-of-floats/

に説明するようアレックスが言ったように、おそらく、overflow: auto（通常は動作します）、またはoverflow: hiddenのいずれかを試してみてください、自動閉鎖山車を試してみたいことがあります。

Answer 3

まず、CSS以外のタグの属性設定であるwidth=300pxを使用しないでください。代わりにwidth: 300px;を使用してください。

clearfixの手法を#outerdivに適用することをおすすめします。 Clearfixは、2つのフローティングディビジョンをクリアするための一般的な解決方法です。そのため、2つのフローティングディビジョンに対応するように親ディビジョンが展開されます。

<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'> 
    <div style='width:300px; float: left;'> 
     <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p> 
    </div> 

    <div style='width:300px; float: left;'> 
     <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p> 
    </div> 
</div> 

ここでは、状況のexampleとそれを解決するためにClearfixが何をしていますか？

Answer 4

まず、CSSスタイルをインラインではなく外部のCSSファイルで行うことをお勧めします。メンテナンスははるかに簡単で、クラスを使用して再利用することもできます。

のアレックスの答え（&ギャレットのclearfix）オフ操作「を明確にして最後に要素を追加する：両方」、あなたはそうのようにそれを行うことができます。

<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> 
     <div style='clear:both;'></div> 
    </div> 

これは動作します（ただし、インラインを見ることができるようにCSSはそれほど美味しくありません）。

Answer 5

利用のjQuery：

セット親身長=子供offsetHeight。

$(document).ready(function() { 
    $(parent).css("height", $(child).attr("offsetHeight")); 
} 

Answer 6

使用clear: both;

私はこれを理解しようとしている一週間以上を過ごしました！

Answer 7

私はいくつかの人が私を憎むだろうと知っていますが、この場合にはdisplay:table-cellが役に立ちました。

本当にきれいです。