2

ノート：

display:table-cell;状況によっては、上部にパディングされていないスペース、またはマージンがあり、border-collapse:collapse;それも修正されない要素があります。も使用する必要がありますvertical-align:text-top;。別のユーザーがこの件について質問します。

元の質問

私はphpを使用してテンプレートファイルを作成し、1つ、2つ、または3つの列があるかどうかに応じて、列に3つの異なるcssルールのセットを使用しています。1セットのルールを機能させることができるかどうか疑問に思っています。

PHPのアイデアを垣間見る

if($this->_data['left']!=NULL)
    echo "<div id='left'>{$this->left}</div>";
if($this->_data['right']!=NULL)
    echo "<div id='right'>{$this->right}</div>";
echo "<div id='content'>{$this->main}</div>";

#left幅と#right左右に固定されます。は#main中央にあり、残りの#wrappers幅を使い果たします。だから、もしなかったら、あっ#rightた#mainはずのスペースを埋める#rightでしょう。

<!-- 3 column -->
<div id='container'>
    <div id='left'></div>
    <div id='main'></div>
    <div id='right'></div>
</div>

<!-- 2 column -->
<div id='container'>
    <div id='left'></div>
    <div id='main'></div>
</div>
<!-- or -->
<div id='container'>
    <div id='main'></div>
    <div id='right'></div>
</div>

<!-- 1 column -->
<div id='container'>
    <div id='main'></div>
</div>
4

1 に答える 1

2

これにはdisplay：tableプロパティを使用できます。このように書いてください：

#container{
    display:table;
    width:100%;
}
#container > div{
    display:table-cell;
    height:50px;
}
#left, #right{
    width:100px;
    background:red;
}
#right{
    background:green;
}
#main{
    background:blue;
}

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

于 2012-05-12T03:47:56.487 に答える