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>

Answer 2

在屏幕分辨率＆lt;屏幕分辨率下尝试媒体查询1000 px使用const值。这可以帮到你。

3列布局（固定，流体，固定），最小宽度

2 个答案: