對齊3格一格有固定寬度

-1

我想對齊3格在同一行與第一個div有一個固定的寬度。對齊3格一格有固定寬度

<div id='container'> 
<div id='div1' style='width:300px'> </div> 
<div id='div2'> </div> 
<div id='div3'> </div> 
</div>

其他兩個div填充剩餘空間。

來源

2013-06-26 Jacob

使用display:table-cell;爲孩子div's和父div ID container一個display:table。

這將在一行中對齊div，保持其他div的相對寬度填充。

這裏是WORKING EXAMPLE

的HTML：

<div id="container"> 
<div id="div1" style="width:300px; background: gray;">&nbsp;</div> 
<div id="div2" style="background: #cccccc;">&nbsp;</div> 
<div id="div3" style="background: #eeeeee;">&nbsp;</div> 
</div>

的CSS：

#container{display:table; width:100%;} 
#container div{display:table-cell;}

來源

2013-06-26 12:33:29 Nitesh

這也會在DOM之間呈現HTML空白，拋出其他寬度計算或破壞設計的一致性。 – Doug

您可以通過將'.container'的font-size設置爲0px並將其恢復到'.container *'中來刪除它們。 –

對不起。我正在創建一個工作解決方案。我已經更新了我的答案 - @Doug – Nitesh

u必須添加浮動：左;

〔實施例：http://jsfiddle.net/nDnqn/

CSS：

#div1, #div2, #div3 { 
    float: left; 
}

來源

2013-06-26 12:37:22 Pavel

對不起，我已經更新了這個問題 – Jacob

雖然其他div不佔用剩餘寬度。 – Doug

他在「其他兩個div填補了剩餘空間」之後編輯。而且我沒有更新，因爲Nathan Lee已經回答了。 – Pavel

試試這個... http://jsfiddle.net/3XPkT/

基本上，如果你準備在第二個包的第一列那是相當直截了當

<div id='container'> 
    <div id='div2'> 
    <div id='div1'>Col 1</div> 
    Col 2 
    </div> 
    <div id='div3'>Col 3</div> 
    <div id="footer">Footer</div> 
</div>

和CSS ...

#div1{background:#999;width:300px;float:left} 
#div2{background:#bbb;width:50%;float:left} 
#div3{background:#ddd;width:50%;float:left} 
#footer{clear:both;}

還有其他的技巧，如使用絕對定位，但會打破任何你想添加的頁腳。

如果左欄非常短 - 中間欄的內容將會包裹在下面 - 您可能會遇到輕微困難 - 但如果需要，可以通過輕觸javascript來解決。

來源

2013-06-26 12:49:14 Doug

對齊3格一格有固定寬度

回答

相關問題