如何制作2个固定宽度的侧边栏div和1个灵活宽度的主要div？

Question

基本上我的html代码如下：

 <div id="leftbar"></div>
 <div id="content"></div>
 <div id="rightbar"></div>

如何使用css对其进行编码，以便所有3个div都是并排的，leftbar和rightbar具有固定的宽度，而内容将灵活地填充webbrowser。

Answer 1

向左浮动左侧栏，并为内容提供左边距值等于（或大于）左侧栏的宽度。向右浮动右侧栏，并为内容提供等于（或大于）右侧栏宽度的右边距值。

.nav1    { width:200px; float:left; }
.nav2    { width:200px; float:right; }
.content { margin:0 210px; }
.clear   { clear:both; }

-

<div id="wrapper">
  <div class="nav1">Main Nav Items</div>
  <div class="nav2">Other Nav Items</div>
  <div class="content">Content goes here</div>
  <div class="clear"></div>
</div>

Answer 2

试试这个：http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

这个怎么样：http://www.glish.com/css/7.asp

Answer 3

现在css有flexbox模型。

您应该阅读规范以获得灵活的网页布局

http://www.w3.org/TR/css3-flexbox/