有2個浮動div的響應式佈局

Question

我有一個浮動的中央DIV，裏面有2個div。我想將左側DIV設置爲固定寬度，右側div設置爲響應。我只是無法使它工作。

我正在尋找更好的方法來實現這個結果。我原來的代碼如下：

CSS

div#content {max-width: 1140px; min-width: 960px; margin:0 auto; } 
div#left {width: 100px; float: left;} 
div#right {background:#F63; min-width: 860px; max-width: 1040px; float:left; } 

HTML

<div id="content"> 
<div id="left">Left Content </div> 
<div id="right">Right Content </div> 
</div> 

Answer 1

看看這個問題，似乎解決你的問題：CSS side by side div with Pixel and Percent widths

他們建議，得到＃右邊距 - 與#left div保持相同的尺寸

I made a fiddle with the changes below:

div#content {width: 100%; margin:0 auto; } 
div#left {width: 100px; float: left;} 
div#right {background:#F63; margin-left: 100px; } 

它看起來像你所期待的那樣嗎？

Answer 2

我假設你想要響應你不希望底部滾動條出現。

既然你想響應，你需要做的數學與成爲％。

我把你的max-width:1140px;爲基礎，有固定的100像素移除後做出的最大寬度爲88％（百分比的1140的剩餘價值。

這允許的響應。對於一個最小寬度我申請了70％，只是這樣的區域沒有推左格低於（由於float:left;）

這裏是工作提琴：
http://jsfiddle.net/pur4z/2/

CSS

div#content {max-width: 1140px; margin:0 auto; } 
div#left {width: 100px; float: left;} 
div#right {background:#F63; min-width:70%; max-width:88%; float: left;} 

HTML

<div id="content"> 
<div id="left">Left Content </div> 
<div id="right">Right Content </div> 
</div>