怎么用css實(shí)現(xiàn)兩欄布局

這篇文章主要介紹了怎么用css實(shí)現(xiàn)兩欄布局，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

　　1、浮動布局

　　左側(cè)欄固定寬度向左浮動，右側(cè)主要內(nèi)容則用margin-left留出左側(cè)欄的寬度，默認(rèn)寬度為auto，自動填滿剩下的寬度。

　　<divclass="one"></div>

　　<divclass="two"></div>

　　.one{

　　float:left;

　　width:200px;

　　height:200px;

　　background:darkcyan

　　}

　　.two{

　　margin-left:200px;

　　height:200px;

　　background:salmon

　　}

　　右側(cè)固定寬度，左側(cè)自適應(yīng)則是同理，只要將固定欄右浮動，使用margin-right空出其寬度即可。

　　<divclass="one"></div>

　　<divclass="two"></div>

　　.one{

　　float:right;

　　width:200px;

　　height:200px;

　　background:darkcyan

　　}

　　.two{

　　margin-right:200px;

　　height:200px;

　　background:salmon

　　}

　　2、浮動布局+負(fù)外邊距（雙飛翼布局的兩欄版）

　　<divclass="aside"></div>

　　<divclass="main">

　　<divclass="content"></div>

　　</div>

　　.aside{

　　width:300px;

　　height:100px;

　　background:darkcyan;

　　margin-right:-100%;

　　float:left;

　　}

　　.main{

　　width:100%;

　　float:left;

　　}

　　.content{

　　margin-left:300px;

　　background:salmon;

　　}

　　3、絕對定位

　　<divclass="left"></div>

　　<divclass="right"></div>

　　.left{

　　width:200px;

　　height:200px;

　　position:absolute;

　　background:darkcyan

　　}

　　.right{

　　height:200px;

　　margin-left:200px;

　　background:salmon;

　　}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么用css實(shí)現(xiàn)兩欄布局”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!