這篇文章主要介紹了怎么用css實現(xiàn)兩欄布局，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
網(wǎng)站建設哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、小程序制作、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了曹縣免費建站歡迎大家使用！
1、浮動布局
左側(cè)欄固定寬度向左浮動，右側(cè)主要內(nèi)容則用margin-left留出左側(cè)欄的寬度，默認寬度為auto，自動填滿剩下的寬度。
.one{
float:left;
width:200px;
height:200px;
background:darkcyan
}
.two{
margin-left:200px;
height:200px;
background:salmon
}
右側(cè)固定寬度，左側(cè)自適應則是同理，只要將固定欄右浮動，使用margin-right空出其寬度即可。
.one{
float:right;
width:200px;
height:200px;
background:darkcyan
}
.two{
margin-right:200px;
height:200px;
background:salmon
}
2、浮動布局+負外邊距（雙飛翼布局的兩欄版）
.aside{
width:300px;
height:100px;
background:darkcyan;
margin-right:-100%;
float:left;
}
.main{
width:100%;
float:left;
}
.content{
margin-left:300px;
background:salmon;
}
3、絕對定位
.left{
width:200px;
height:200px;
position:absolute;
background:darkcyan
}
.right{
height:200px;
margin-left:200px;
background:salmon;
}
感謝你能夠認真閱讀完這篇文章，希望小編分享的“怎么用css實現(xiàn)兩欄布局”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!
重慶分公司
重慶分公司
