1

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

#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) 这可能吗？

4

4 回答 4

2

尝试#Content显示：块。并给所有三个 div 相同的高度。这将扩大以填补空白：

http://jsfiddle.net/HMS2s/

于 2013-08-27T21:55:08.877 回答
0

它有助于建立对象的容器，因此它们的百分位数基于实体，但我想您将处理媒体查询。填充不应用于为中间列创建宽度，因为它会占用空间，我相信您正在尝试这样做？如果你想要等高的列，有一篇很长的文章，你应该在这里查看。

这个 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;
}
于 2013-08-27T22:23:36.460 回答
0

也许像下面这样的东西？

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>

例子

于 2013-08-27T22:30:16.820 回答
0

删除显示：table-cell；从#Content 并添加溢出：隐藏；

于 2013-08-27T22:39:16.577 回答