左div 200px寬度，剩餘內容div？

body { 
       font-family: Arial, Helvetica, sans-serif; 
       font-size: 13px; 
      } 

      #wrapper { 
       padding: 1px; 
       margin: 0 auto; 
      } 

      #left { 
       width: 200px; 
       float: left; 
       background: orange; 
       position: fixed; 
       text-align: center; 
       padding: 2px; 
      } 

      #content { 
       float: right; 
       text-align: left; 
       padding: 2px; 
       width: ???; 
       background: #F0F0F0; 
      }

你好，再次stackoverflow！我想創建一個簡單的佈局，菜單寬度爲200px，內容div需要寬度的其餘部分...但我該怎麼做？左div 200px寬度，剩餘內容div？

我已經搜索谷歌和其他計算器的話題，但我無法找到任何東西...

問候

編輯：我試圖尋找對GOOLGE再次，我發現一個例子它應該如何看起來像： http://www.thesitewizard.com

而是因爲他有一些還挺奇怪的div的名字我不知道他用什麼樣的代碼什麼的div ...

來源

2011-02-20 Thew

如何使用百分比？ - 左側寬度爲20％，內容寬度爲75％，間隔爲5％，間距爲 – naiquevin

不，這在不同的屏幕寬度下看起來很奇怪...... – Thew

您可以使用float工作結合保證金來實現你想要的結果。爲了得到你想要你的HTML結構應該類似於這樣的內容：

<div id="wrapper"> 
    <div id="menu">place your content here</div> 
    <div id="main">place your content here</div> 
</div>

所需的最低CSS應該是這樣的：

#menu { float: left; width: 200px; } 
#main { margin-left: 200px; }

我添加了一個demo on jsfiddle顯示的幫助下結果一些背景顏色。

來源

2011-02-20 13:00:34 stefanglase

'margin-left：auto;'在這種情況下會是更好的方法， t需要重複'200px' – 2015-11-17 13:24:59

可以用

width:100%; 
padding-left:200px; 
float:right;

爲＃內容和

width:200px; 
float:left; 
padding-left:-200px;

爲#left

來源

2011-02-20 13:00:33

如何使用display:table, display:table-row, display:table-cell元素？

的jsfiddle這裏：jsFiddle

顯示：表是現在支持所有的瀏覽器，所以在2013年我會用這個

來源

2013-12-03 15:36:41

已過時，'display：flex;'是新方法（2015年11月） – 2015-11-17 13:26:16

我很驚訝，沒有人用CSS迴應：在這一點上flex

display:flex;

有關您可以使用此屬性的所有方法的教程，請嘗試使用flexbox froggy

來源

2017-03-20 14:42:12 InfernalRapture

左div 200px寬度，剩餘內容div？

回答

相關問題