3列布局（固定，流体，固定），最小宽度 [英] 3 column layout (fixed, fluid, fixed) with minimum width

问题描述

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

我想有3列布局，左边的列是固定的200px，右边的列固定为200px，中间的列是剩余的宽度，但最小宽度为600px。所以整个最小宽度是200px + 600px + 200px = 1000px。

我看到很多例子，当调整浏览器大小时，列彼此重叠，这是一个问题。

感谢

解决方案

无论那么一个简单的解决方案是使用显示表/表单元格。使包装100％宽，具有所需的最小宽度。指定固定宽度列的宽度。对于表格显示，所有列的高度都相等。

  #wrapper {display：table;宽度：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>  

b $ b

I have searched the web and just cannot seem to find a clean, simple, all browser friendly 3 column layout.

I am looking to have 3 column layout, the left column being 200px fixed with, the right column being 200px fixed with and the centre column the remaining width, but with a min-width of 600px. so the overall min-width is 200px + 600px + 200px = 1000px.

I have seen a lot of examples where the columns seem to overlap each other when resizing the browser, which is a problem.

Thanks

解决方案

If source order does not matter then one simple solution is to use display table/table cell. Make the wrapper 100% wide with desired minimum width. Specify widths for fixed width columns. With table display, all columns will have equal height.

#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>

这篇关于3列布局（固定，流体，固定），最小宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！