原始代码
html部分
1 2 3 4 5
| <div class="container"> <div class="center">center</div> <div class="left">left</div> <div class="right">right</div> </div>
|
css部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| body { min-width: 630px; } .center { width: 100%; height: 150px; background-color: #94E8FF; } .left { width: 100px; height: 150px; background-color: #FFB5BF; } .right { width: 200px; height: 150px; background-color: #8990D5; }
|
效果展示
原始效果

最终效果

实现方法
圣杯布局
1 2 3 4 5
| <div class="container"> <div class="center">center</div> <div class="left">left</div> <div class="right">right</div> </div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| .container { overflow: hidden; padding-left: 100px; padding-right: 200px; } .center { float: left; } .left { position: relative; left: -100px; float: left; margin-left: -100%; } .right { position: relative; right: -200px; float: left; margin-left: -200px; }
|
双飞翼布局
1 2 3 4 5 6 7
| <div class="container"> <div class="center-container"> <div class="center">center</div> </div> <div class="left">left</div> <div class="right">right</div> <div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| .container { overflow: hidden; } .center-container { float: left; width: 100%; } .center-container .center { margin-left: 100px; margin-right: 200px; width: 100%; height: 150px; background-color: #94E8FF; } .left { float: left; margin-left: -100%; } .right { float: left; margin-left: -200px; }
|
flex 方法
1 2 3 4 5
| <div class="container"> <div class="center">center</div> <div class="left">left</div> <div class="right">right</div> </div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| .container { display: flex; } .center { flex-grow: 1; height: 150px; background-color: #94E8FF; }
.left { order: -1; width: 100px; height: 150px; background-color: #FFB5BF; } .right { width: 200px; height: 150px; background-color: #8990D5; }
|