html - CSS 三列，中间列固定宽度

Question

我需要将一个元素放置在另外两个元素之间。中间元素具有指定的宽度，但侧面元素必须自动计算其宽度(针对不同的屏幕宽度)。如果我添加左侧元素，它会完全忘记中间元素上的“margin:0 auto”，而在右侧添加一个元素只是将其放置在下面，因为中间元素已经占用了“float:right”<的空间/p>

我尝试过的:

HTML:

<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>

CSS:

* {
    height: 200px;
}
.left {
    background: red;
    width: auto;
    overflow: hidden;
}
.middle {
    background: green;
    width: 400px;
    float: right;
}
.right {
    background: blue;
    width: auto;
    overflow: hidden;
}

这里是 JSFiddle 显示它:http://jsfiddle.net/xnwv8scp/2/

Answer 1

你可以尝试 flex 盒:

body {
  display: flex;  /* Magic begins */
}
.middle {
  width: 400px;   /* Specified width */
}
.left, .right {
  flex: 1;        /* Fill available space */
}
body > * {
  min-width: 0;   /* Widths ignore the content */
  height: 200px;
}
.left { background: red; }
.middle { background: green; }
.right { background: blue; }

<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>