フローティング内部divを最高divと同じ高さにする方法

Question

次のコードでは、divの高さと3 'xの高さを一致させるために' y 'のdivを使用します。注意すべき

<div style="border: 0px solid red; margin: 0px 0px 5px; overflow: hidden;"> 
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; background-color: rgb(30, 23, 22); width: 312px; float: left;"> 
    x<br/>x<br/>x 
</div> 
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; width: 312px; background-color: rgb(30, 23, 22); float: right;"> 
    y 
</div> 

物事は、内側のdivが浮遊しているされています。

Answer 1

することは、あなたはEqualHeightを使用することができ、それはあなたが私はあなたが与える別にリスト（と思う）、で見た解決策がありました

Answer 2

3つのオプションがあります。

1. 内側のdivを外側のdivと同じ高さにします。これはあまりにも難しくありません。
2. 内側のdivを別のdivに入れて、高さや高さを100％とし、含めるdivと同じ高さにしますが、これは含まれているdivがおそらく高さそのdivまたはページを含むしかし、それはショットの価値があるかもしれません。または、最も簡単なもの
3. テーブルを使用します。この問題は、テーブルでは些細なことです。 pure CSS deficienciesの良い例です。

2つのdivの「共有」高さに簡単な方法はありません。 100％の高さのようなトリックは、あなたが使用する必要があるCSS属性と使用している罫線の両方でブラウザ間で問題があります。ボーダーは通常、使用する高さに加えてあります。

一部の人はdisplay：table-cellと言っているかもしれませんが、そのサポートはIE上ではかなり制限されています。あなたはjQueryのスポットへの悪影響はない場合

Answer 3

たい何をすべき2つの内側の列は巨大な底部の詰め物ですが、負の余白と同じ大きな値です。これは、カラムが32000px以上でない限り動作しますが、これはまれです。次のようなものがあります。

.col { 
    float: left; 
    padding-bottom: 32000px; 
    margin-bottom: -32000px; 
} 

...ここで、「col」は任意の列のクラス名です。個別の列をスタイルすることもできますが、別のクラスを使用することもできます。

<div class="col xxx">x<br />x<br />x</div> 
<div class="col yyy">y</div> 

別のオプションは、など、あなたの国境、このアプローチは、明らかにそれは少し難しく列（幅、色が）一度設定変更のだ意味を含め、外側のdivに背景画像を使用することです。