0

次の 3 つの列が必要です。

  • 左の列(赤背景)
  • 中央の列(黄色の背景)
  • 右の列(黒の背景)

HTML、次のように:

<div id="container">
    <div id="left_column">
        <p>text</p>
    </div>

    <div id="center_column">
        <p>loooooong text</p>
        <p>other text</p>
    </div>

    <div id="right_column">
    </div>
</div>​

すべての列は同じ高さにする必要があります (柔軟)

デモhttp://jsfiddle.net/4hj4f/8/を作成しました- しかし、この CSS は間違っています - 列の高さが異なります

4

2 に答える 2

1

このタイプの機能には、display:tableを使用できます。次のように書きます。

body, html{height:100%}
#container {
    height: 100%;   
   display:table;    
}

#left_column, #center_column, #right_column {
    display: table-cell;
    width: 200px;
    height: 100%;
    vertical-align:top;
}

これをチェックしてくださいhttp://jsfiddle.net/4hj4f/9/

于 2012-10-30T13:32:24.997 に答える
0

コンテナの高さを設定します。条件を設定するのに十分です。

#container {
height: 500px;            
}

デモ：フィドル

于 2012-10-30T13:59:14.467 に答える