8

我正在尝试创建一个三列布局，带有静态宽度的侧边栏和一个流体中心列。我不希望当页面变得太窄时列下降（中心列在 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%;
}
4

2 回答 2

7

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 演示

更新：这是编辑过的小提琴

于 2013-08-24T16:59:55.020 回答
2

您可以使用

display:table;

例子

于 2013-08-24T17:00:28.043 回答