html寬度（100％-n px）？

在HTML頁面上，我有兩列。我將第1列的寬度設置爲75％，第2列的寬度設置爲25％。使用style='width:75%;'設置寬度。我的列被設置爲div，據我所知，使用表格進行佈局被認爲是不好的做法。html寬度（100％-n px）？

我的問題是，我可以讓一列有固定寬度（例如200px），另一列自動佔用瀏覽器窗口的餘下寬度嗎？

來源

2011-04-05 Daniel Allen Langdon

通常情況下，您可以通過使用邊距來實現這一點。這方面的一個例子是如下：

#wrapper { overflow:hidden; } 

#right 
{ 
    float:right; 
    display:inline; 
    width: [Fixed Width]px; 
} 

#left 
{ 
    margin-right:[Fixed Width]px; 
    display:inline; 
}

然後HTML標記如下：

<div id="wrapper"> 
    <div id="right">Test</div> 
    <div id="left">Test</div> 
</div>

這將在IE6 +的工作，和所有我知道的主流瀏覽器。「display：inline」是爲了在IE6中增加額外的頁邊空白。

它可以工作，因爲浮動被取消了頁面的正常流程，所以「#left」將總是佔用任何可用空間。包裝是一個快速清除技巧。

來源

2011-04-05 17:24:53 Mig

'margin-right'爲+1，但爲什麼你需要'display：inline'？任何浮動的元素都會自動成爲塊級元素？ – Gareth 2011-04-05 17:29:07

它修復了IE6中的雙重保證金錯誤。現代瀏覽器會正確地忽略浮動元素的顯示屬性，但IE6不會。假設你將margin-left添加到了#right（愚蠢，我知道，你會從餘額中扣除這筆金額 - 正常情況下，通常是在#left上）。這將使利潤率翻倍。 – Mig 2011-04-05 17:31:31

使用<table style="width:100%;">。然後，其中一列可以有width:200px，另一列可以佔用剩餘的空間。

來源

2011-04-05 17:21:04

使用表格進行佈局會導致頁面充滿難以讀取的標記。 – Gareth 2011-04-05 17:31:04

我看到的每一個跨瀏覽器的「CSS列」解決方案（缺少CSS3）都比表格更加複雜和脆弱。這就是說，我理解道德反對意見。 – 2011-05-19 18:08:04

一個常見的解決方案是將固定寬度列向左或向右浮動，併爲另一列提供等於或大於固定寬度列寬度的邊距。順便說一句，如果你的列是一個像div這樣的塊級元素，你不必設置寬度，它會自動佔用所有可用空間。

來源

2011-04-05 17:21:27 jeroen

html寬度（100％-n px）？

回答

相關問題