三列div問題？

我有一個三列的頁面。他們都是流體：三列div問題？

#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）這可能嗎？

來源

2013-08-27 Someone

嘗試給#Content顯示：塊。並給所有三個divs相同的高度。，將擴大，以填補空白：

http://jsfiddle.net/HMS2s/

來源

2013-08-27 21:55:08

這將填充整個頁面，而不僅僅是兩列之間的空間。 – Someone

修復了答案，給元素一個高度將修復該問題 –

我怎樣才能達到變化的高度呢？ – Someone

它有助於建立對象的容器，所以他們的百分已經都基於一個堅實的，但我想你會處理媒體查詢。不應該使用填充來爲中間列創建寬度，因爲它會佔用空間，這是我相信您正在嘗試執行的操作？如果你想要相同高度的欄目，那麼你應該查看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; 
}

來源

2013-08-27 22:23:36 JosephMCasey

喜歡的東西，也許下面的？

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

來源

2013-08-27 22:30:16 Malcolm

刪除顯示：表細胞;從#Content並添加溢出：隱藏;

來源

2013-08-27 22:39:16

三列div問題？

回答

相關問題