html - 扩展到整个页面宽度的 3 列 CSS 解决方案

Question

我想要一个全宽的 3 列，如下所示

所以:

SideL(左栏)宽度:150px

内容(中心列)宽度:自动

SideR(右栏)宽度:250px

这是我的(CSS):

div#SideL   { float: left; width: 150px; }
div#Content { float: left; width: 70%; }
div#SideR   { float: left; width: 250px; }

问题出在我必须将宽度设置为 70% 的内容中。这不是我要找的。我更喜欢这样的东西:width:auto 但它不起作用。>> 我希望内容宽度在页面的整个宽度上扩展。

有什么想法吗？

谢谢:)

Answer 1

我会使用绝对位置。检查以下 CSS:

div#SideL   {position:absolute;width:150px;}
div#Content {position:absolute;left:151px;right:251px;}
div#SideR   {position:absolute;right:0;width:250px; }

对 div#Content 使用 left 和 right 您可以将元素移动到任何您想要的地方

演示:http://jsfiddle.net/7radp/