2

笔记：

display:table-cell;在某些情况下，顶部有空间的元素不是填充或边距，border-collapse:collapse;也不能修复它。您还需要使用vertical-align:text-top;. 另一个用户对这个问题的提问。

原始问题

我用 php 创建了我的模板文件，并且根据是否有 1、2 或 3 列，对列使用了 3 组不同的 css 规则。我想知道我是否可以让一组规则起作用。

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 回答