原始代码
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
| .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="left">left</div> <div class="right">right</div> <div class="center">center</div> </div>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| .center { width: 100%; height: 150px; background-color: #94E8FF; } .left { float: left; width: 100px; height: 150px; background-color: #FFB5BF; } .right { float: 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 21 22 23 24
| .container { position: relative; } .center { position: absolute; left: 100px; right: 200px; height: 150px; background-color: #94E8FF; } .left { position: absolute; left: 0px; width: 100px; height: 150px; background-color: #FFB5BF; } .right { position: absolute; right: 0px; width: 200px; height: 150px; background-color: #8990D5; }
|
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
| .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; }
|
grid 布局
1 2 3 4 5
| <div class="container"> <div class="left">left</div> <div class="center">center</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
| .container { display: grid; grid-template-columns: 100px 1fr 200px; } .center { width: 100%; height: 150px; background-color: #94E8FF; } .left { width: 100px; height: 150px; background-color: #FFB5BF; } .right { width: 200px; height: 150px; background-color: #8990D5; }
|
table 布局
1 2 3 4 5
| <div class="container"> <div class="left">left</div> <div class="center">center</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
| .container { display: table; } .center { display: table-cell; 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 21 22 23 24 25 26 27 28 29
| .container { overflow: hidden; padding-left: 100px; padding-right: 200px; } .center { float: left; width: 100%; height: 150px; background-color: #94E8FF; } .left { position: relative; left: -100px; float: left; margin-left: -100%; width: 100px; height: 150px; background-color: #FFB5BF; } .right { position: relative; right: -200px; float: left; margin-left: -200px; width: 200px; height: 150px; background-color: #8990D5; }
|
双飞翼布局
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 24 25 26 27 28
| .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%; width: 100px; height: 150px; background-color: #FFB5BF; } .right { float: left; margin-left: -200px; width: 200px; height: 150px; background-color: #8990D5; }
|