Question

我有一个包含三列的页面。它们都很流畅：

#LeftColumn
{
display:table-cell;
float:left;
padding-left:0;
padding-right:16%;
padding-top:0;
padding-bottom:1%;
margin-right:1%;
margin-left:0;
margin-bottom:0;
margin-top:0;
position:static;
}

#RightColumn
{
display:table-cell;
float:right;
padding-right:0;
padding-left:16%;
padding-top:0;
padding-bottom:1%;
margin-left:1%;
margin-right:0;
margin-bottom:0;
margin-top:0;
}

#Content
{
display:table-cell;
width:auto;
}

在页面中，它们表示如下：

<div id="LeftColumn">
</div>
<div id="RightColumn">
</div>
<div id="Content">
<!-- Stuff goes here -->
</div>

我使用这种布局在我的项目中创建了几个页面，并且它运行得相当好。但是，有一个问题：当我在其中放入文本时，中间列只会扩展。因此，当我在其中放置诸如水平标尺之类的东西时，它只与前面和后面的段落一样宽。我希望中心div（#Content）和左列和右列之间的空间一样宽（#LeftColumn，＃RightColumn）这可能吗？

Answer 1

尝试给#Content display：block。并给所有三个div高度相同。这将扩大以填补空白空间：

http://jsfiddle.net/HMS2s/

Answer 2

它有助于建立对象的容器，因此它们的百分位数基于实体，但我想你会处理媒体查询。填充不应该用于为中间列创建宽度，因为它会占用空间，这是我认为你试图做的？如果您想要相同的高度列，那么有一篇非常长的文章，您应该查看here。

Example of this CSS

#container{
width:80%;
float:left;
}
#leftcolumn{
float: left;
width: 33%;
background-color:green;
padding: 0 0 1% 0;
margin: 0 1% 0 0;
display: table-cell;
}
#middlecolumn{
overflow:hidden;
background-color:blue;
padding: 0 1% 1% 1%;
}
* html #middlecolumn{float:left}
* html #middlecolumn #content{width:100%;}

#rightcolumn{
float:right;
width: 33%;
background-color:red;
position:relative;
padding: 0 0 1% 0;
margin: 0 0 0 1%;
display: table-cell;
}

Answer 3

可能会出现以下情况？

CSS

#LeftColumn
{
display:table-cell;    
float:left;
padding-left:0;
padding-right:16%;
padding-top:0;
padding-bottom:1%;
margin-right:1%;
margin-left:0;
margin-bottom:0;
margin-top:0;
position:static;
}

#RightColumn
{
display:table-cell;    
float:right;    
padding-right:0;
padding-left:16%;
padding-top:0;
padding-bottom:1%;
margin-left:1%;
margin-right:0;
margin-bottom:0;
margin-top:0;
}

#Content
{  
overflow: hidden;    
}

HTML

<div id="LeftColumn">
</div>
<div id="RightColumn">
</div>
<div id="Content" class="Content">
<!-- Stuff goes here -->
</div>

Example

Answer 4

删除显示：table-cell;来自#Content并添加overflow：hidden;

三栏div问题？

4 个答案: