CSS流體'列'

Question

什麼是在CSS中獲得這種佈局的最佳方式？想象我在兩個內部div中有三個div，兩個div在另一個裏面，第一個div有一個特定的寬度集合，第二個div有望佔用剩下的空間。

通常我會最終在第二列上設置一個特定的寬度，並在包含div寬度改變的最後管理更新。

如果我浮動固定但不是流體，流體柱將包裹在固定的div下面（不是我們想要的）。

+-------+ +--------------------------------------+ 
| fixed | |          | 
+-------+ |    fluid     | 
      |          |   
      |          | 
      +--------------------------------------+ 

<div> 
    <div>fixed</div> 
    <div>fluid</div> 
</div> 

這必須是一個完全的CSS的解決方案，不需要JavaScript frameworks-和理想的最常用的瀏覽器適用於以最小的「hackage」（如果有的話）。

希望ASCII藝術作品，

謝謝。

Answer 1

標記

<div id="fixed">fixed content</div> 
<div id="fluid">fluid content</div> 

的CSS

#fixed { 
    float: left; 
    width: 13em; 
    margin-right: -14em; 
} 
#fluid { 
    margin-left: 14em; 
} 

這應該做的伎倆。我在我的個人網站上使用它。利潤率保持在同一水平。

Answer 2

希望這至少可以幫助您開始：

* { 
    margin:0; 
} 

div#wrapper { 
    margin:0; 
    height:auto !important; //IE Hack 
    height:100%; //IE Hack 
    min-height:100%; 
    overflow:auto 
} 

div#fixed{ 
    float:left; 
    position:absolute; 
    background-color:red; 
    margin:0; 
    height:200px; 
    width:200px 
} 

div#fluid{ 
    float:right; 
    position:absolute; 
    left:200px; 
    background-color:blue; 
    display:block; 
    height:80%; 
    width:60% 
} 

的「包裝」將是你的包裹格。我只將流體柱的寬度設置爲60％，這樣您就可以看到它應該流暢地起作用。我在Opera 10，IE 6和Firefox 3中測試了這個問題，只有很小的問題。如果您將流體列的寬度設置爲100％，IE想要在右側附加額外的200像素。我確信有一個地方可以解決這個問題。

Answer 3

您可以使用支持液柱的Emastic CSS Framework。這裏Link是類似於你的「ASCII藝術作品」的工作示例:)

Answer 4

實際上有一個更簡單的解決方案，我發現不久前。適用於IE7。 #fluid div將在固定修補程序旁邊滑動並佔用剩餘空間，同時保持所有響應網站的流暢性。

#fixed{ 
    width:200px; 
    float:left; 
} 
#fluid{ 
    overflow:hidden; 
}