CSS：流體側欄 - 流體內容

enter image description here CSS：流體側欄 - 流體內容

上圖中的所有內容均已解釋。

基本上，我需要一個側欄div，其寬度根據其內容和擴展到窗口寬度的其餘部分進行擴展。

2009-07-15 RyanScottLewis

這很好。那裏有問題嗎？或者只是一份工作單？我會回答一個問題，但我不會做你的工作。 – geowa4 2009-07-16 00:01:01

如果側邊欄根據其內容進行擴展，則會擴展到100％的寬度，並且其中包含一些文本行。不是真正的側欄定義。 – stefanw 2009-07-16 00:08:25

這似乎是這樣做的。雖然@stefanw有一個點。側欄會擴大到其文本的寬度，這意味着文本將不會換行。我認爲這可能不是你想要的。或者，也許是，如果你在這裏放置的東西不是很寬，但是不是固定的？

<html> 
<head> 
    <style type="text/css"> 
#overallWrapper div { 
    background: #CCC; 
    border: 1px solid black; 
    padding: 15px; 
    height: 100%; 
} 
#sideBar { 
    float: left; 
} 
    </style> 
</head> 
<body> 
    <div id="overallWrapper"> 
    <div id="sideBar"> 
     I need this to expand to the width of this text... 
    </div> 
    <div id="content"> 
     This should take the rest of the room, whatever's left... 
    </div> 
    </div> 
</body> 
</html>

如果需要，您可以刪除overallWrapper。

來源

2009-07-16 00:23:38 pkaeding

如果您完全擔心左側側欄的寬度，那麼您可以將最大寬度css屬性應用於左側div，以防您不打斷您的內聯內容。

此外，請確保您的文檔類型是嚴格的，如果你支持ie7與最大寬度。

來源

2009-07-16 00:29:27 brack

CSS：流體側欄 - 流體內容

回答

相關問題