三列布局...左側（固定像素），中間（50％），右側（50％）

我希望左欄爲40像素。我希望中心列成爲剩餘視口的50％，我希望右列成爲其餘視口的另一半。三列布局...左側（固定像素），中間（50％），右側（50％）

它應該是這個樣子：

[LEFTCOLUMN][...CENTER COLUMN...][...RIGHT COLUMN....] 
[...40px...][........50%........][........50%........]

這裏（link）提出的解決方案不會爲我的情況下，中心柱可以變得太崩潰了在移動設備上運行。

謝謝！

來源

2012-10-05 Noah David

我想這可能爲你工作：

http://jsfiddle.net/KR9zj/

從本質上講，關鍵是浮動LEFTCOLUMN，並在包裝與包裝overflow: hidden既CENTERCOLUMN和RIGHTCOLUMN。

來源

2012-10-05 17:19:03

沒錯。這個解決方案開箱即用。謝謝你的幫助，肖恩。做得好。 –

這項工作？

演示：http://jsfiddle.net/BVhCZ/

正如你可以看到，左邊是絕對的，「剩餘」是包含兩個50％的浮動孩子一個街區股利。應該對任何寬度工作>〜40像素

代碼：

<div class="left">LEFT</div> 
<div class="content"> 
    <div class="content-left">CONTENT LEFT</div> 
    <div class="content-right">CONTENT RIGHT</div> 
</div> 

.left { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 40px;  
    background-color: #ddd; 
} 
.content { 
    margin-left: 40px;  
} 
.content .content-left { 
    float: left; 
    width: 50%; 
    clear: none; 
    background-color: #fdd; 
} 
.content .content-right { 
    float: right; 
    width: 50%; 
    clear: none; 
    background-color: #ddf; 
}

來源

2012-10-05 17:21:43 techfoobar

此解決方案將無法正常工作，因爲您將左類的絕對定位位置設置爲0,0，這意味着沒有任何東西可以超出該div。 –

使用display:table;和display:table-cell;。無需與float:x;拼搏。

HTML：

<div id='container'> 
    <div id='first'>a</div> 
    <div id='second' class='fifty'>b</div> 
    <div id='third' class='fifty'>c</div> 
</div>

CSS：

#container { display:table; width:100%; } 
#container > * { display:table-cell; } 
#first { width:40px; min-width:40px; } 
#container .fifty { width:50%; }

活生生的例子：http://jsfiddle.net/j25wK/

來源

2012-10-05 17:30:09 Marwelln

如果由於#container> *聲明在第二個或第三個div內存在span標記（例如），則此解決方案將不起作用。我嘗試將表格單元格手動應用到第二個和第三個，但它沒有正確排列。 –

雖然，我應該提到...它確實看起來最清潔的CSS明智。我先測試了你的解決方案:) –

三列布局...左側（固定像素），中間（50％），右側（50％）

回答

相關問題