三欄佈局-左右定寬，中間自適應
阿新 • • 發佈：2019-01-26
flex彈性盒子
思想：容器內的專案自動調整
只需在左右的倆個專案中調整flex-basis設定固定寬度即可
<style type="text/css"> *{ margin: 0; padding: 0; } .con { width: 100%; height:100%; background: red; display: flex; display: -webkit-flex; /* flex-direction: row; justify-content: center; align-items: center; */ } .left,.right{ flex:0 1 300px;//屬性flex-grow,flex-shrink,flex-basis簡寫 height: 100px; background: green; } .middle{ flex-grow: 1; height: 100px; background: black; } </style> <body> <div class="con"> <div class="left">1</div> <div class="middle">2</div> <div class="right">3</div> </div> </body>
float+margin佈局
思想：左右盒子均float，左邊左浮動，右邊右浮動。中間文件流使用margin將其稱出來。
出現問題：右邊的那欄另起一行居右
解決：將中間那欄放在最後面
<style type="text/css"> *{ margin: 0; padding: 0; } .left{ float:left; height: 100px; width: 300px; background: yellow; } .right{ float:right; height: 100px; width: 300px; background: green; } .middle{ margin: 0 300px; height: 100px; background: black; } </style> <body> <div class="con"> <div class="left">1</div> //注意順序 <div class="right">3</div> <div class="middle">2</div> </div> </body>
絕對定位佈局
思想：左中右均絕對定位，外包盒子相對定位
中間盒子左右各距離左右的寬度
<style type="text/css"> *{ margin: 0; padding: 0; } .con{position: relative;} .left,.right,.middle{ position: absolute; } .left{ left:0; height: 100px; width: 300px; background: yellow; } .right{ right:0; height: 100px; width: 300px; background: green; } .middle{ left:300px; right:300px; height: 100px; background: black; } </style> <body> <div class="con"> <div class="left">1</div> <div class="middle">2</div> <div class="right">3</div> </div> </body>