3列布局(固定,流体,固定),最小宽度

Question

我搜索过网络,似乎无法找到干净,简单,所有浏览器友好的3列布局.

我希望有3列布局,左列是200px固定,右列是200px固定,中间列是剩余宽度,但最小宽度为600px.因此整体最小宽度为200px + 600px + 200px = 1000px.

我看到很多例子,当调整浏览器大小时,列似乎相互重叠,这是一个问题.

谢谢

Answer 1

如果源顺序无关紧要,那么一个简单的解决方案是使用显示表/表格单元格.使包装物100%宽,具有所需的最小宽度.指定固定宽度列的宽度.使用表格显示,所有列都具有相同的高度.

#wrapper {
  display: table;
  width: 100%;
  min-width: 1000px;
  min-height: 400px;
}
#column-1 {
  display: table-cell;
  background: #DDF;
  width: 200px;
}
#column-2 {
  display: table-cell;
  background: #EEE;
}
#column-3 {
  display: table-cell;
  background: #DDF;
  width: 200px;
}

<div id="wrapper">
  <div id="column-1">= 200px</div>
  <div id="column-2">&gt;= 600px</div>
  <div id="column-3">= 200px</div>
</div>