CSS兩列布局對齊左？

Question

我有一個簡單的設計。左側是導航欄，右側是內容div。我只是做了左浮動和右浮動，它可以工作 - 除非顯示器太寬。然後導航欄離左邊很遠（應該是這樣），但內容緊貼右邊。中間是空的空間。我想讓內容緊挨着左側的導航欄。

我該如何做到這一點？

Answer 1

如何浮動他們兩個到左邊，使用百分比值來設置其寬度.. 象下面這樣：

#sidebar,#content {float:left;} 
#sidebar {width:25%;} 
#content {width:75%} 

或者，如果你想解決您的側邊欄的大小，並有內容填充

HTML：

<div id="content"><div class="in"> 
CONTENT HERE 
</div></div> 

<div id="sidebar"> 
SIDEBAR HERE 
</div> 

CSS：

你可以做以下的空間（我用它所有的時間）的休息

#content,#sidebar {float:left;} 
#sidebar {width:300px; position:relative;/*so content won't cover it*/} 
#content {width:100%; margin-right:-300px;/*sidebar's width*/} 
    #content .in {margin-right:300px; 
        /*sidebar's width or more for space between blocks*/} 

Answer 2

有很多方法可以做到這一點。

這取決於：

• 如果你想有一個固定寬度的佈局，或相對的。
• 如果您希望佈局居中或不居中。
• 等

你想要什麼或/和你的實際代碼將有助於草圖。

無論如何，如果你不知道CSS佈局，你可以使用像blueprint這樣的CSS框架，它很容易使用，並自己照顧你當前的問題。