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框架，它很容易使用，并自己照顾你当前的问题。