css實現三列布局
阿新 • • 發佈：2018-11-11
1. 使用float實現三列左右固定寬高，中間自適應寬度
<section class="wrapper">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</section>
<style>
.wrapper div { height: 300px; }
.left { float: left; width: 100px; background: red; }
.center { background: blue; margin-left: 100px; margin-right: 100px; }
.right { float: right; width: 100px; background: yellow; }
</style>
注意： 這裡的right元素右浮動，center沒有浮動，應該把右浮動的元素寫在center前面才能實現三列效果，否則右浮動的元素會被擠向下一行；
2. 使用opsition實現
<section class="wrapper">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</section>
<style>
.wrapper { position: relative; }
.wrapper div { height: 300px; }
.left { position: absolute; top: 0; left: 0; width: 100px; background: red; }
.center { position: absolute; top: 0; left: 100px; right: 100px; background: blue; }
.right { position: absolute; top: 0; right:0; width: 100px; background: yellow; }
</style>
注意： 這裡的center一定要設定left和right，才能讓中間內容區被撐開
3.flex佈局實現
<style>
.wrapper { display: flex }
.wrapper div { height: 300px; }
.left { width: 100px; background: red; }
.center { background: blue; flex: 1;}
.right { width: 100px; background: yellow;}
</style>
注意： 這裡的center要設定flex: 1;實現中間寬度自適應
4. table佈局
<style>
.wrapper { display: table; width: 100%;}
.wrapper div { display: table-cell; height: 300px; }
.left { width: 100px; background: red; }
.center { background: blue;}
.right { width: 100px; background: yellow;}
</style>
注意：要給父元素設定寬度百分百
5.雙飛翼，利用margin負值實現
<body>
<section class="wrapper">
<div class="center"></div>
</section>
<div class="left"></div>
<div class="right"></div>
</body>
<style>
.wrapper { width: 100%; height: 100px; background-color: #fff; float: left; }
.wrapper .center { margin: 0 210px; height: 100px; background-color: #ffe6b8; }
.left { float: left; width: 200px; height: 100px; background-color: darkorange; margin-left: -100%; }
.right { float: left; width: 200px; height: 100px; background-color: darkorange; margin-left: -200px; }
</style>
注意：要在center外層包一個父元素，並給這個父元素設定float開啟BFC，並且center部分程式碼要放在最前面，左右的無所謂
參考連結： https://blog.csdn.net/cinderella_hou/article/details/52156333
https://blog.csdn.net/weixin_40485972/article/details/78161022?utm_source=blogxgwz0