1. 程式人生 > >三欄式佈局昨天已經寫了,今天談談兩欄式佈局

三欄式佈局昨天已經寫了,今天談談兩欄式佈局

目標: 左欄自適應,右欄固定寬度。

本來一直思考怎麼用浮動做好兩欄,結果做完後自適應的左欄寬度達到一定後不再變長(此時子元素無法繼續撐開父元素)。

原來做法:  

左右兩欄均向左浮動,左欄再用margin-left:-左欄寬度 ,渲染時兩欄寬度都會縮小為最最寬子元素的寬度且無法撐開(可以隨視窗縮小)。

最後直接拋棄浮動:左欄 

margin-right:預留寬度

右欄 絕對定位

 width: 280px;
    right: 0px;
    position: absolute;
    top:10px;