css - 主div两边的div，填充剩余空间

Question

我很难把我的大脑包裹在这个周围。

我将如何获得一个固定宽度的 div，margin:auto，然后在该 div 的两侧都有 div 可以自动调整其宽度以填充其余空间？

感谢感谢任何帮助

Answer 1

试试这个jsfiddle它使用简单的display属性来实现这个布局。即使您将宽度缩放到极小值，它也会为您提供一致的布局，并且您无需硬编码任何内容，除了<div>您也可以在%.

更新

First fiddle 的中心<div>宽度%使其适合响应式设计。这个小提琴的中心宽度固定（以像素为单位）

Answer 2

像这样没有任何容器的东西。

http://jsfiddle.net/JuG8W/

HTML

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

CSS

#left{
   float:left;
   width: calc( 50% - 150px );
   background-color:blue;
}
#right{
    float:right;    
    width: calc( 50% - 150px );
    background-color:green;
}
#middle{
   float:left;
   width:300px; 
   margin:0 auto;
   background-color:red;
}