看完这篇还不知道css固定和自适应可以小和尚要摆地摊了
目錄
? ? ? ? ? ? ? ? ??前言
開篇
左右側(cè)采用浮動(dòng) 中間采用margin-left 和 margin-right 方法。
中篇
利用絕對(duì)定位中間同樣采用margin-left margin-right方法
續(xù)篇
負(fù)的margin
終篇?
三列布局中間固定，其他兩列自適應(yīng)
?
前言
接上一篇的小徒弟繼續(xù)說(shuō)吧
上一篇小徒弟進(jìn)入山門之后，又開始一段新的歷練。
師傅（路人甲）+徒弟（路人乙）
路人甲：徒弟，你已經(jīng)成長(zhǎng)了，要學(xué)會(huì)自己去獨(dú)立了。
路人乙:獅虎，有什么新的指示嗎
路人甲:你學(xué)習(xí)了那么久了，知道如何實(shí)現(xiàn)兩列固定，中間自適應(yīng)的布局嗎，實(shí)現(xiàn)不了就去擺地?cái)偘?/span>
開篇
小徒弟陷入了沉思，開始思考了一會(huì)
路人乙:我想想
第一種方式
左右側(cè)采用浮動(dòng) 中間采用margin-left 和 margin-right 方法。
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>兩行固定中間自適應(yīng)</title> </head> <style></style><body><div style="width:100%; margin:0 auto;"><div style="width:200px; float:right; background-color:#960">這是右側(cè)的內(nèi)容 路人甲</div><div style="width:150px; float:left; background:#6FF">這是左側(cè)的內(nèi)容 路人乙</div><div style="margin-left:150px;margin-right:200px; background-color:#9F3">中間內(nèi)容，自適應(yīng)寬度</div></div> </body></html>中篇
想了一會(huì)之后
路人乙:我想不出了 獅虎獅虎 可以提示一下嗎
路人甲沉默了一會(huì)，還是按照你原來(lái)的想法做一下修改就好了
第二種方式
第二種：利用絕對(duì)定位中間同樣采用margin-left margin-right方法
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>兩行固定中間自適應(yīng)</title> </head> <style>.left,.right {position: absolute;top: 0;width: 220px;height: 100%;}.left {left: 0;background-color: blue;}.right {right: 0;background-color: red;}.main {margin: 0 230px;height: 100%;} </style><body><div class="left">路人甲</div><div class="right">歌謠</div><div class="main">路人乙</div> </body></html>續(xù)篇
路人乙想了一會(huì)
第三種方式負(fù)的margin
路人乙:
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>兩行固定中間自適應(yīng)</title> </head> <style>#main {float: left;width: 100%;}#mainContainer {margin: 0 230px;height: 200px;background: green;}#left {float: left;margin-left: -100%;width: 230px;background: orange;height: 200px;}#right {float: left;margin-left: -230px;width: 230px;background: orange;height: 200px;} </style><body><div id="main"><div id="mainContainer">main content</div></div><div id="left">left content</div><div id="right">right</div> </body></html>終篇
晚上小徒弟回去休息休息，又來(lái)了新的思路
可不可以實(shí)現(xiàn)三列布局中間固定，其他兩列自適應(yīng)呢
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}#left {height: 300px;background: orange;float: left;width: 50%;position: relative;margin-left: -150px;}#right {height: 300px;background: orange;float: right;width: 50%;margin-left: -150px;}#center {width: 300px;height: 300px;background: green;float: left;position: relative;}</style> </head><body><div id="left">我是路人甲</div><div id="center">我是歌謠</div><div id="right">我是路人乙</div></body></html>想到這里 小徒弟悠閑的進(jìn)入了自己的夢(mèng)鄉(xiāng)，終于不要被趕出師門去擺地?cái)偭恕?/span>
我是歌謠 一個(gè)沉迷于故事的講述者。
本故事純屬虛構(gòu)
歡迎一起交流 一起進(jìn)步
?
總結(jié)
以上是生活随笔為你收集整理的看完这篇还不知道css固定和自适应可以小和尚要摆地摊了的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用Jenkins实现自动化构建！
- 下一篇： Oracle 数据库实例介绍