html - 中央のコンテナにある2つの列を同じ高さにするにはどうすればよいですか?

Question

CSSで同じ高さの列を作成するにはどうすればよいですか? 私がインターネットで検索したのは 1 色の背景だけでしたが、私は白い背景を持っています。すべての列には丸い境界線が必要であり、左側の列には内部に多くのコンテナーが含まれる場合があります。列が等しくなるように、これを作成するにはどうすればよいですか。つまり、左と右を意味します。また、写真のように右の柱の高さが左の柱の高さよりも小さい場合、どうすればいいですか？伸ばす必要があります。

Answer 1

表示テーブルを使用できます。残念ながら、IE7 ではうまく動作しません。私は人々にそれへのサポートをやめることを勧めますが. 私の会社はちょうどそうしました。ここでは他にも利用可能なテクニックがありますが、意味的にはこれが最もエレガントだと思います。

http://css-tricks.com/fluid-width-equal-height-columns/

http://jsfiddle.net/7HgwA/1

CSS

body { padding: 10px; }
#container { 
    display: table; 
    width: 600px; 
    margin: 0 auto; 
    overflow: auto; 
    border: 1px solid gray; 
    border-radius: 20px; 
    padding: 10px; 
}

#container > div { display: table-cell; }
#container div { border: 1px solid gray; border-radius: 20px; padding: 20px;  }
#left > div { height: 100px; margin-bottom: 10px; background: white; } 

#left { width: 150px;  background: lightgray; }
#container #spacer { width: 20px; border: none; padding: 0px; }

HTML

<div id="container">
    <div id="left">
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
        <div>Some content</div>
    </div>
    <div id="spacer"></div>
    <div id="right">
        <p>Lorem ipsum dolor sit</p>
    </div>
</div>​