2022-05-30 分類: 網(wǎng)站建設(shè)
今天想說的是一個(gè)左右定寬,中間自適應(yīng),實(shí)現(xiàn)三列布局,我也總結(jié)了以下,主要有以下幾種:
廢話不多說,直接上代碼:
第一種:float
<!--html-->
<div id="left"><span>left</span></div>
<div id="right"><span>right</span></div>
<div id="middle"><span>middle</span></div>
//css
#left{
float: left;
background-color: red;
width: 150px;
height: 50px;
}
#right {
float: right;
background-color: yellow;
width: 200px;
height: 50px;
}
#middle {
margin: 0 200px 0 150px;
width: 100%;
background-color: #fff9ca;
height: 50px;
}
第二種:BFC
<!--html-->
<div id="left"><span>left</span></div>
<div id="right"><span>right</span></div>
<div id="middle"><span>middle</span></div>
//css
#left {
background-color: red;
width: 150px;
height: 50px;
float: left;
}
#right {
background-color: yellow;
width: 200px;
height: 50px;
float: right;
}
#middle {
background-color: #fff9ca;
height: 50px;
overflow: hidden;
}
第三種:雙飛翼布局
<!--html-->
<div class="grid">
<div id="middle">
<div id="middle-span"><span>middle</span></div>
</div>
<div id="left"><span>left</span></div>
<div id="right"><span>right</span></div>
</div>
//css
#middle {
float: left;
background-color: #fff9ca;
width: 100%;
height: 50px;
}
#middle-span {
margin: 0 200px 0 150px;
}
#left {
float: left;
position: relative;
background-color: red;
width: 150px;
margin-left: -100%;
height: 50px;
}
#right {
float: left;
position: relative;
background-color: yellow;
width: 200px;
margin-left: -200px;
height: 50px;
}
第四種:flex
<!--html-->
<div class="flex">
<div id="left"><span>left</span></div>
<div id="middle"><span>middle</span></div>
<div id="right"><span>right</span></div>
</div>
//css
.flex {
display: flex;
flex-flow: row;
}
#left {
background-color: red;
width: 150px;
height: 50px;
}
#middle {
background-color: #fff9ca;
flex: 1; /* flex中寬度自適應(yīng)使用該屬性,使用100%時(shí)其他列的固定寬度會(huì)出現(xiàn)問題*/
height: 50px;
}
#right {
background-color: yellow;
width: 200px;
height: 50px;
}
本文名稱:左右定寬,中間自適應(yīng),實(shí)現(xiàn)三列布局
分享地址:http://m.newbst.com/news35/160835.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供搜索引擎優(yōu)化、定制開發(fā)、外貿(mào)建站、電子商務(wù)、網(wǎng)站收錄、關(guān)鍵詞優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容