使用css怎么實(shí)現(xiàn)兩邊固定中間自適應(yīng)布局-創(chuàng)新互聯(lián)
這篇文章將為大家詳細(xì)講解有關(guān)使用css怎么實(shí)現(xiàn)兩邊固定中間自適應(yīng)布局，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
成都創(chuàng)新互聯(lián)自2013年創(chuàng)立以來(lái)，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目
網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元槐蔭做網(wǎng)站,已為上家服務(wù),為槐蔭各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108
浮動(dòng)
.wrap {background: #eee; padding: 20px; }
p {margin: 0; }
.left {width: 200px; height: 200px; float: left; background: coral; }
.right {width: 200px; height: 200px; float: right; background: lightblue; }
.middle {margin: 0 200px; background: lightpink; }
我在左邊
我在右邊
我排最后，但是跑到中間來(lái)了
原理：
浮動(dòng)內(nèi)嵌 div
.wrap {background: #eee; padding: 20px; }
p {margin: 0; }
.left {width: 200px; height: 200px; float: left; background: coral; margin-left: -100%;}
.right {width: 200px; height: 200px; float: left; background: lightblue; margin-left: -200px;}
.middle {width: 100%; height: 200px;float: left; background: lightpink; }
span{
display: inline-block;
margin: 0 200px;
}
我在中間
我在左邊
我在右邊
原理：
定位
.wrap {background: #eee; position: relative;}
p {margin: 0; }
.left {width: 200px; height: 200px; background: coral; position: absolute;left: 0; top: 0;}
.right {width: 200px; height: 200px; background: lightblue; position: absolute;right: 0; top: 0;}
.middle {height: 200px; background: lightpink; margin: 0 200px;}
我在中間，我用 margin 抵消左右兩塊定位元素占據(jù)空間
我在左邊，我是定位元素
我在右邊，我是定位元素
css的全稱是Cascading Style Sheets（層疊樣式表），它是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化。
關(guān)于使用css怎么實(shí)現(xiàn)兩邊固定中間自適應(yīng)布局就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
重慶分公司
重慶分公司
