2個左側浮動div，具有固定大小和自動寬度

您好，我遇到CSS設計問題。我有2個浮動div，其中第一個始終是200像素寬度，其中第二個div必須是頁面寬度的其餘部分。這怎麼辦？我已經tryed寬度：汽車和100％2個左側浮動div，具有固定大小和自動寬度

<div style="float: left; width: 200px"> 
</div> 
<div style="float: left;"> 
</div>

來源

2011-06-06 Androme

最近給你的例子：

<div style="float: left; width: 200px;"> 
</div> 
<div style="margin-left: 200px;"> 
</div>

來源

2011-06-06 13:16:50

刪除我的答案。我不喜歡我在做什麼。爲你+1。 – wdm 2011-06-06 13:41:56

它的工作，但格被調整到它的內容裏面是空的，現在，如果你想保留它爲空，嘗試「顯示：塊;

來源

2011-06-06 13:05:55 Alexcp

我認爲這可能是你在找什麼

Expand div to max width when float:left is set

來源

2011-06-06 13:08:11

你不需要第二<div>試試這個：。

<html> 
    <body> 
     <div style="float: left; width: 200px; margin-right: 20px;"> 
      Floating Content 
     </div> 
     Main Content 
    </body> 
</html>

主要內容將圍繞浮動底部<div>，所以如果你不想這樣做，你將不得不設置高度。

來源

2011-06-06 13:13:47 FishBasketGordo

到目前爲止，這裏最好的技巧就是隻float左div：

http://jsfiddle.net/8y2t2/

#left { 
    width: 200px; 
    float: left; 
    background: #ccc 
} 
#right { 
    background: red; 
    overflow: hidden 
} 
<div id="left">left</div> 
<div id="right">right</div>

從做獎金這種方式您不需要將左側的div的寬度指定爲width和margin-left（正如在這裏的其他答案）。這要感謝overflow: hidden。

比較：http://jsfiddle.net/8y2t2/1/ VS http://jsfiddle.net/8y2t2/2/

如果你想多個實例：http://jsfiddle.net/8y2t2/3/

來源

2011-06-06 13:22:10 thirtydot

2個左側浮動div，具有固定大小和自動寬度

回答

相關問題