杭州网站建设价格,做全景图的网站,wordpress注册代码,wordpress博客二次元目录 前言
开篇
左右侧采用浮动 中间采用margin-left 和 margin-right 方法。
中篇
利用绝对定位中间同样采用margin-left margin-right方法
续篇
负的margin
终篇
三列布局中间固定#xff0c;其他两列自适应 前言
接上一篇的小徒弟继续说吧
上一篇小徒弟进入山门…目录 前言
开篇
左右侧采用浮动 中间采用margin-left 和 margin-right 方法。
中篇
利用绝对定位中间同样采用margin-left margin-right方法
续篇
负的margin
终篇
三列布局中间固定其他两列自适应 前言
接上一篇的小徒弟继续说吧
上一篇小徒弟进入山门之后又开始一段新的历练。
师傅路人甲徒弟路人乙
路人甲徒弟你已经成长了要学会自己去独立了。
路人乙:狮虎有什么新的指示吗
路人甲:你学习了那么久了知道如何实现两列固定中间自适应的布局吗实现不了就去摆地摊吧 开篇
小徒弟陷入了沉思开始思考了一会
路人乙:我想想
第一种方式
左右侧采用浮动 中间采用margin-left 和 margin-right 方法。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title两行固定中间自适应/title
/head
style/stylebodydiv stylewidth:100%; margin:0 auto;div stylewidth:200px; float:right; background-color:#960这是右侧的内容 路人甲/divdiv stylewidth:150px; float:left; background:#6FF这是左侧的内容 路人乙/divdiv stylemargin-left:150px;margin-right:200px; background-color:#9F3中间内容自适应宽度/div/div
/body/html 中篇
想了一会之后
路人乙:我想不出了 狮虎狮虎 可以提示一下吗
路人甲沉默了一会还是按照你原来的想法做一下修改就好了
第二种方式
第二种利用绝对定位中间同样采用margin-left margin-right方法
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title两行固定中间自适应/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%;}
/stylebodydiv classleft路人甲/divdiv classright歌谣/divdiv classmain路人乙/div
/body/html 续篇
路人乙想了一会
第三种方式负的margin
路人乙:
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title两行固定中间自适应/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;}
/stylebodydiv idmaindiv idmainContainermain content/div/divdiv idleftleft content/divdiv idrightright/div
/body/html 终篇
晚上小徒弟回去休息休息又来了新的思路
可不可以实现三列布局中间固定其他两列自适应呢
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/titlestyle* {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
/headbodydiv idleft我是路人甲/divdiv idcenter我是歌谣/divdiv idright我是路人乙/div/body/html 想到这里 小徒弟悠闲的进入了自己的梦乡终于不要被赶出师门去摆地摊了。
我是歌谣 一个沉迷于故事的讲述者。
本故事纯属虚构
欢迎一起交流 一起进步
