看完这篇还不知道css固定和自适应可以小和尚要摆地摊了
生活随笔
收集整理的這篇文章主要介紹了
看完这篇还不知道css固定和自适应可以小和尚要摆地摊了
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
? ? ? ? ? ? ? ? ??前言
開篇
左右側采用浮動 中間采用margin-left 和 margin-right 方法。
中篇
利用絕對定位中間同樣采用margin-left margin-right方法
續篇
負的margin
終篇?
三列布局中間固定，其他兩列自適應
?
前言
接上一篇的小徒弟繼續說吧
上一篇小徒弟進入山門之后，又開始一段新的歷練。
師傅（路人甲）+徒弟（路人乙）
路人甲：徒弟，你已經成長了，要學會自己去獨立了。
路人乙:獅虎，有什么新的指示嗎
路人甲:你學習了那么久了，知道如何實現兩列固定，中間自適應的布局嗎，實現不了就去擺地攤吧
開篇
小徒弟陷入了沉思，開始思考了一會
路人乙:我想想
第一種方式
左右側采用浮動 中間采用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>兩行固定中間自適應</title> </head> <style></style><body><div style="width:100%; margin:0 auto;"><div style="width:200px; float:right; background-color:#960">這是右側的內容 路人甲</div><div style="width:150px; float:left; background:#6FF">這是左側的內容 路人乙</div><div style="margin-left:150px;margin-right:200px; background-color:#9F3">中間內容，自適應寬度</div></div> </body></html>中篇
想了一會之后
路人乙:我想不出了 獅虎獅虎 可以提示一下嗎
路人甲沉默了一會，還是按照你原來的想法做一下修改就好了
第二種方式
第二種：利用絕對定位中間同樣采用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>兩行固定中間自適應</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>續篇
路人乙想了一會
第三種方式負的margin
路人乙:
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>兩行固定中間自適應</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>終篇
晚上小徒弟回去休息休息，又來了新的思路
可不可以實現三列布局中間固定，其他兩列自適應呢
<!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>想到這里 小徒弟悠閑的進入了自己的夢鄉，終于不要被趕出師門去擺地攤了。
我是歌謠 一個沉迷于故事的講述者。
本故事純屬虛構
歡迎一起交流 一起進步
?
總結
以上是生活随笔為你收集整理的看完这篇还不知道css固定和自适应可以小和尚要摆地摊了的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用Jenkins实现自动化构建！
- 下一篇： Google Analytics（分析）