CSS - 可以实现这种流畅的布局吗？

Question

所以我想在这里实现的是让红色框的固定宽度为400px，在页面上水平居中。红色框的任何一面都是一个绿色的盒子和一个可变宽度的淡紫色盒子，可以水平填充窗口的其余部分并拉伸以适合窗口大小。

因此，在较大的显示器上，绿色和淡紫色的盒子将水平拉伸，页面中间的红色框将保持相同的宽度。

解决方案需要在IE 8及更高版本中工作，尽管我对只能在IE9 +中工作的解决方案感兴趣。

Answer 1

您可以使用calc来解决此问题：

HTML：

<div class="green"></div>
<div class="red"></div>
<div class="lilac"></div>

CSS：

html, body {
    width: 100%
}

.green {
    width: calc((100% - 400px)/2); //takes the total space, minus the red box space, divided by two.
    height: 200px;
    background: green;
    float: left;
}

.red {
    width: 400px;
    height: 200px;
    background: red;
    float: left;
}

.lilac {
    width: calc((100% - 400px)/2);
    height: 200px;
    background: lavender;
    float: left;
}

概念证明：http://jsfiddle.net/yERs7/

Answer 2

您可以使用display: table，并且与IE8完全兼容，正如您所要求的那样

关于codepen的示例：http://codepen.io/anon/pen/emCFy/

---

<强>标记：

<div>
  <section style="background: #91ee93">
    Green</section>
  <section style="background: #ee8c8f" role="main">
    Red</section>
  <section style="background: #e48fec">
    Pink</section>
</div>

<强>的CSS

div {
  display: table;
  table-layout: fixed;
  width: 100%;
}

section {
  display: table-cell;
}

section[role] {
  width: 400px;
}

Answer 3

I created this quick JSFiddle hack for you.

基本上我们让这三个div相互浮动，给中间一个固定宽度并在另外两个上使用这个标记：

width:50%;
padding-left: 150px;
margin-left: -150px;
box-sizing: border-box;

和

width:50%;
padding-right: 150px;
margin-right: -150px;
box-sizing: border-box;

其中150等于中间div宽度的一半。