Question

我正在尝试使用静态宽度侧边栏和流体中心列创建三列布局。我不希望当页面太窄时列丢失（中心列为250px），我希望整个事情只是冻结，并采用侧滚动。很确定这不能用浮动来完成。以下是我到目前为止的情况：

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

Answer 2

您可以使用

display:table;

example

如何使用没有浮子的流体中心制作3列布局

2 个答案: