css - 等しい高さのCSS列

Question

クロスブラウザCSSの例で同じ高さの列を使用する

HTML：

<div id="container1">
  <div id="col1">Column 1<br/>2</div>
    <div id="col2">Column 2</div>
    <div id="col3">Column 3</div>
</div>

CSS：

#container1 {
    float:left;
    width:100%;
}
#col1 {
    float:left;
    width:30%;
    background:red;
}
#col2 {
    float:left;
    width:40%;
    background:yellow;
}
#col3 {
    float:left;
    width:30%;
    background:green;
}

より複雑なデモページがありますが、私は自分の目的のために最初の例を使用することを探しています。なぜ例が機能しないのですか？

http://jsfiddle.net/YryJM/2/

Answer 1

同じ高さの列を作成する最も簡単な方法は、 を使用することdisplay: tableです。

#container1 {
    display: table;
    width:100%;
}

#col1, #col2, #col3 {
  display: table-cell;
}
#col1 {
    width:30%;
    background:red;
}
#col2 {
    width:40%;
    background:yellow;
}
#col3 {
    width:30%;
    background:green;
}

http://jsfiddle.net/YryJM/3/

Answer 2

多分これはうまくいくでしょうか？コンテナ div の固定高さを設定してから、col div を 100% に設定しますか?

#container1 {
float:left;
width:100%;
height:50px;
}
#col1 {
float:left;
width:30%;
background:red;
height:100%;
 }
#col2 {
float:left;
width:40%;
background:yellow;
height:100%;
}
#col3 {
float:left;
width:30%;
background:green;
height:100%;
}

例 http://jsfiddle.net/squinny/dps4f/1/

これがあなたを助けるかどうかidk？