css - 如何在没有 float 的情况下制作具有流体中心的 3 列布局

Question

我正在尝试创建一个三列布局，具有静态宽度的侧边栏和一个流畅的中心列。我不希望当页面变得太窄时(中心列为 250 像素)，列会下降，我希望整个内容都卡住，并使用横向滚动。很确定这不能用花车来完成。这是我目前所拥有的:

http://jsfiddle.net/eNDPG/210/

HTML:

<div id="header">
    Header
</div>
<div id="container">
<span id="leftcol">
     Text1
</span>
<span id="rightcol">
    Text3
</span>  
<div id="centercol">
    Text2
</div>
</div>
<div id="footer">
    Footer
</div>

CSS:

#container {
overflow:hidden;
width: 100%;
float: left;
}

#leftcol {
border: 1px solid #0f0;
display: inline-block;
float: left;
width: 200px;
}

#rightcol {
border: 1px solid #0f0;
display: inline-block;
float: right;
width: 250px;
}

#centercol {
border: 1px solid #000;
overflow: hidden;
}

#header {
border: 1px solid pink;
width: 100%;
}

#footer {
border: 1px solid pink;
width: 100%;
}

Answer 1

CSS float 没有任何问题。您可以在包装器上使用 min-width 属性来设置最小宽度。

这是一个例子:

HTML:

<div class="wrap">
  <div class="left">Left</div>
  <div class="right">Right</div>
  <div class="center">Center</div>
</div>

CSS:

.wrap {
  width: 100%;
  min-width: 940px;
}

.left {
  float: left;
  width: 200px;
}

.center { margin: 0 205px; }

.right {
  float: right;
  width: 200px;
}

JSBin Demo

更新:这里是 edited Fiddle