CSS 常用经典布局 - 三栏布局效果展示原始效果最终效果原始代码html 部分12345<div class="container"> <div class="center">center</div> <div class="left">left</div> <div class="right">right</div></div>css 部分123456789101112131415161718192021body { min-width: 630px; margin: 0;}.center { height: 150px; background-color: #94e8ff;}.left { width: 100px; height: 150px; background-color: #ffb5bf;}.right { width: 200px; height: 150px; background-color: #8990d5;}实现方法flex 布局1234567891011.container { display: flex;}.center { flex-grow: 1;}.left { order: -1;}定位布局12345678910111213141516171819.container { position: relative;}.center { position: absolute; left: 100px; right: 200px;}.left { position: absolute; left: 0;}.right { position: absolute; right: 0;}圣杯布局1234567891011121314151617181920212223.container { overflow: hidden; padding-left: 100px; padding-right: 200px;}.center,.left,.right { float: left;}.left { position: relative; left: -100px; margin-left: -100%;}.right { position: relative; right: -200px; margin-left: -200px;}双飞翼布局12345678<div class="container"> <div class="center-container"> <div class="center">center</div> </div> <div class="left">left</div> <div class="right">right</div> <div></div></div>1234567891011121314151617181920212223242526.container { overflow: hidden;}.center-container,.left,.right { float: left;}.center-container { width: 100%;}.center-container .center { margin-left: 100px; margin-right: 200px;}.left { margin-left: -100%;}.right { margin-left: -200px;}grid 布局12345<div class="container"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div></div>1234.container { display: grid; grid-template-columns: 100px 1fr 200px;}table 布局12345<div class="container"> <div class="left">left</div> <div class="center">center</div> <div class="right">right</div></div>123456.container { display: table;}.center { display: table-cell;} 实用技巧 #CSS #布局CSS 常用经典布局 - 三栏布局https://blog.xukaiyyds.cn/posts/1db87a14/作者xukaiyyds发布于2023年2月11日更新于2024年4月10日许可协议 CSS 实现盒子水平垂直居中的方法 上一篇CSS 常用经典布局 - 两栏布局 下一篇 Please enable JavaScript to view the comments