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框架，它很容易使用，并且可以自己解决当前的问题。