題目:
一個頁面上兩個div左右鋪滿整個瀏覽器,
要保證左邊的div一直為100px,右邊的div跟隨瀏覽器大小變化,
比如瀏覽器為500,右邊div為400,瀏覽器為900,右邊div為800。
方案一:使用flex布局
<div class="box"> <div class="left"></div> <div class="right"></div> </div>
.box{ display: flex; display: -webkit-flex; flex-direction: row; align-items: center; border: 1px solid #c3c3c3; } .left { flex-basis:100px; -webkit-flex-basis: 100px; /* Safari 6.1+ */ background-color: red; height: 100%; } .right { background-color: blue; flex-grow: 1; }
方案一:使用浮動布局
<div class="left"></div> <div class="right"></div>
*{ margin: 0; padding: 0; } .left { float: left; width: 220px; background-color: green; } .right { background-color: orange; margin-left: 220px; /*==等於左邊欄寬度==*/ }