1，弹性盒（flex）构造

中间 .center 区域设置    flex-grow: 1 或者 width: 100%

.container { width: 100%; min-height: 200px; background-color: red; display: flex; } .container .left { width: 200px; height: 200px; background-color: purple; } .container .right { width: 150px; height: 200px; background-color: blue; } .container .center { /* flex-grow: 1; */ width: 100%; height: 200px; background-color: orange; } <div> <div></div> <div></div> <div></div> </div>

2, 操作浮动（注意div排版的布局）

.container{ width: 100%; /* background-color: green; min-height: 500px; */ } .left{ width: 200px; height: 300px; background-color: pink; float: left; } .right{ width: 150px; height: 300px; background-color: purple; float: right; } .center{ height: 300px; margin-left: 200px; margin-right: 150px; background-color: blue; } <div> <div></div> <div></div> <div></div> </div>

3，定位 （注意div排版的布局）

.container { width: 100%; position: relative; } .left { width: 200px; height: 300px; background-color: pink; position: absolute; top: 0; left: 0; position: absolute; } .right { width: 150px; height: 300px; background-color: purple; position: absolute; top: 0; right: 0; } .center { height: 300px; margin-left: 200px; margin-right: 150px; background-color: blue; }

<div>
<div></div>
<div></div>
<div></div>
</div>

4, 双飞翼构造

left、center、right三种都设置左浮动

设置center宽度为100%

设置负边距，left设置负边距为100%，，right设置负边距为自身宽度

设置content的margin值为摆布两个侧栏留出空间，margin值巨细为left和right宽度

body { min-width: 550px; font-weight: bold; font-size: 20px; } #container { overflow: hidden; } #left, #right, #center { float: left; } #center { width: 100%; background: rgb(206, 201, 201); } #left { width: 200px; margin-left: -100%; background: rgba(95, 179, 235, 0.972); } #right { width: 150px; margin-left: -150px; background: rgb(231, 105, 2); } .content { margin: 0 150px 0 200px; } <div> <div> <div>#center</div> </div> <div>#left</div> <div>#right</div> </div>

CSS3实现了摆布固定中间自适应的几种要领