在DIV布局中实现正确对齐的侧边栏

Question

我正在尝试使用DIV来调整我的网页内容： http://labs.pieterdedecker.be/test/test.htm

正如您所看到的，侧边栏有问题。我通过执行float: right让侧边栏DIV与页面右侧对齐，但是当侧边栏中的文本停止时，主区域将占据侧边栏应使用的宽度。

我该如何解决这个问题？

Answer 1

我想要完成的是将2个列中的#body div分开。 首先，如果你将主列打包在它自己的div中会更容易：

<div id="body">
    <div id="sidebar">lorem ipsum...</div>
    <div id="main">lorem ipsum...</div>
</div>

然后给#main div一个宽度。

如果您需要保留标记，则#sidebar以外的所有#body元素必须具有宽度。

如果页面是静态的并且其内容不会“增长”，那么另一种解决方案就是为侧边栏设置一个足够大的高度......

也许您正在寻找的是相同的高度列...有一些不同的方法来做到这一点...只是谷歌为它或看看这个：http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Answer 2

您可以为主区域指定宽度。