我正在尝试使用DIV来对齐页面内容:
http://labs.pieterdedecker.be/test/test.htm
如您所见,边栏有问题。通过执行float: right
,我使侧边栏DIV对齐到页面的右侧,但是当侧边栏中的文本停止时,主区域占据了应由侧边栏使用的宽度。
我该如何解决?
最佳答案
我想您要完成的是将#body div分为两列。
首先,如果将main列打包到其自己的div中,将更加容易:
<div id="body">
<div id="sidebar">lorem ipsum...</div>
<div id="main">lorem ipsum...</div>
</div>
然后给#main div一个宽度。
如果需要保留标记,则#sidebar以外的所有#body元素都必须具有宽度。
如果页面是静态的并且其内容不会“增长”,那么另一个可行的解决方案是在侧边栏设置足够大的高度...
也许您正在寻找的是等高列...有一些不同的方法可以执行此操作...只需使用google或查看以下内容即可:http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks