html - 具有最小宽度的 3 列布局(固定、流动、固定)

Question

我在网上搜索过，似乎找不到一个干净、简单、所有浏览器都友好的 3 列布局。

我希望有 3 列布局，左列固定为 200px，右列固定为 200px，中间列为剩余宽度，但最小宽度为 600px。所以整体最小宽度为 200px + 600px + 200px = 1000px。

我见过很多例子，在调整浏览器大小时，列似乎相互重叠，这是一个问题。

谢谢

Answer 1

如果源顺序无关紧要，那么一种简单的解决方案是使用显示表格/表格单元格。使 wrapper 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>