html - 2つのフローティングdivを並べて、同じ高さ

Question

重複の可能性：
より大きなdiv内の2つのdivは、同じ高さに等しくなければなりません…しかし、どのように？

containerLeft div（赤い背景）の高さをcontainerRightdivと同じ高さに自動設定できません。私は特にこれが流動的なグリッドのままであることを望んでいます。

ここのjsfiddle：http: //jsfiddle.net/s7ufg/

Answer 1

2つの列の一方が常にもう一方よりも高くなることがわかっている場合は、次のようにすることができます。

デモ

position: absolute短い列に与えて、からに伸ばすだけtop: 0ですbottom: 0。

HTML：

<div class='container'>
    <div class="containerLeft">
        <h2>1.</h2>
        <p>First, let's play a video.</p>
    </div>
    <div class="containerRight">
        <img src="http://tctechcrunch2011.files.wordpress.com/2012/09/michael-headshot-red.jpg?w=288" />
    </div>
</div>​

CSS：

.container { position: relative; }
.containerLeft { /* shorter column */
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 38%;
    padding: 2%;
    background-color: crimson;
}
.containerRight { /* taller column */
    margin: 0 0 0 42%;
    width: 58%;
    background: dodgerblue;
}​

---

どちらが高くなるかわからない場合は、親の背景グラデーションを使用して、それらが等しいという事実をシミュレートできます。height

デモ

HTMLは同じで、CSSは次のようになります。

.container {
    overflow: hidden;
    background: -webkit-linear-gradient(left, crimson 42%, dodgerblue 42%);
    background: -moz-linear-gradient(left, crimson 42%, dodgerblue 42%);
    background: -o-linear-gradient(left, crimson 42%, dodgerblue 42%);
    background: linear-gradient(left, crimson 42%, dodgerblue 42%);
}
.containerLeft, .containerRight { float: left; }
.containerLeft {
    width:38%;
    padding: 2%;
}
.containerRight { width: 58%; }​

---

ただし、CSSグラデーションはIE9以前では機能しないため、IE8 +のソリューションが必要な場合は、これを試すことができます

デモ

:beforeと疑似要素を使用します。:after

.container {
    overflow: hidden;
    position: relative;
}
.container:before,.container:after {
    position: absolute;
    z-index: -1;
    top: 0; bottom: 0;
    content: '';
}
.container:before {
    left: 0;
    width: 42%;
    background: crimson;
}
.container:after {
    right: 0;
    width: 58%;
    background: dodgerblue;
}
.containerLeft, .containerRight { float: left; }
.containerLeft {
    z-index: 2;
    width:38%;
    padding: 2%;
}
.containerRight { width: 58%; }​

Answer 2

フローティングdivの問題は、「通常のフロー」から外れることです。つまり、CSSインタープリターは親のサイズを認識しないため、高さの設定を「自動的に」行うことはできず、手動で高さを設定する必要があります。

このフィドルの更新により、状況が明確になるはずです：http: //jsfiddle.net/s7ufg/1/

Answer 3

1つの列の下部を切り取ることができます：http：//jsfiddle.net/gtGjY/

追加した：

.containerLeft {
    padding-bottom: 1005px;
    margin-bottom: -1000px;
}
.outer { overflow: hidden; } /* div around both columns */

.containerRight img {
    display: block;
}​