Question

我在整理这个脑子时遇到了麻烦。

我如何使用固定宽度div，margin：auto，然后在div的两侧都有自动调整宽度的div来填充其余的空间？

由于感谢任何帮助

Answer 1

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

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;
}

Answer 2

试试这个jsfiddle它使用简单的display属性来实现这种布局。即使您将宽度缩放到最小值，也可以为您提供一致的布局，除了中心<div>的宽度之外，您不必硬编码，%也可以指定。

更新

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

主div两侧划分，填补剩余空间

2 个答案:

更新