三栏自适应

三栏布局中间自适应

一、使用flex布局

//原理使用flex布局，左右给固定宽度，中间使用felx:1分得剩余宽度 .outer{ display: flex; width: 100%; } .outer>div{ height: 200px; } .left{ width: 200px; background-color: red; } .center{ flex: 1; background-color: skyblue; } .right{ width: 200px; background-color: greenyellow; } <div class="outer"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25

二、使用float

//原理使用float浮动，左右固定的宽度，中间使用calc()函数计算宽度 .outer{ width: 100%; min-width: 600px; } .outer>div{ height: 200px; } .left{ float: left; width: 200px; background-color: red; } .right{ float: right; width: 200px; background-color: skyblue; } .center{ float: left; width:calc(100% - 400px); background-color: yellowgreen; } <div class="outer"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28

三、使用position

//原理使用position定位，子盒子绝对定位，给定左右固定宽度， //左边left为0，右边right为0，中间左右距离为左右盒子的宽度 .outer{ position: relative; width: 100%; min-width: 600px; } .outer>div{ position: absolute; height: 200px; top: 0; } .left{ width: 200px; left: 0; background-color: orange; } .right{ width: 200px; right: 0; background-color: orange; } .center{ left: 200px; right: 200px; background-color: skyblue; } <div class="outer"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32

四、使用table布局

//原理使用table布局，给左右固定的宽度，给中间盒子进行table布局， //继承父亲(总宽度-左右宽度的)100%类似于felx布局 .outer{ display: table; width: 100%; min-width: 600px; } .outer>div{ height: 200px; } .left{ width: 200px; background-color: red; } .right{ width: 200px; background-color: greenyellow; } .center{ display: table-cell; width: 100%; background-color: skyblue; } <div class="outer"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28

五、使用grid布局

//原理使用grid布局，通过父盒子给子盒子行和列进行设置大小，行代表高度， //列代表宽度，中间设置为auto为自适应 .outer{ display: grid; grid-template-columns: 200px auto 200px; grid-template-rows: 200px; } .inner{ background-color: orange; } .middle{ background-color: skyblue; } <div class="outer"> <div class="inner"></div> <div class="inner middle"></div> <div class="inner"></div> </div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

六、使用双飞翼布局

//原理使用负的margin值进行挤压，中间盒子设置为100%宽度，左右盒子给定宽高 //通过使用负margin值进行挤压，挤到指定位置 .outer{ width: 100%; } .outer>div{ float: left; } .middle{ width: 100%; height: 200px; background-color: red; } .left{ width: 200px; height: 200px; background-color: skyblue; margin-left: -100%; } .right{ width: 200px; height: 200px; margin-left: -200px; background-color: orange; } <div class="outer"> <div class="middle"></div> <div class="left"></div> <div class="right"></div> </div>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30

css3前端

来自专栏

css

 爱编程的梨清 10篇文章  0人订阅

发布于2022-04-03著作权归作者所有

相关推荐更多

三栏布局，中间自适应

qq602285510 3336 阅读  1 评论

左右固定宽，中间自适应（三栏布局）的方法

dou_xiaobao 2444 阅读  0 评论

最新发布 利用flex布局实现两边固定，中间自适应

Rare-Qi 1929 阅读  0 评论

五种方式实现三栏布局，左右固定中间自适应。

一尤花岛树鸣 278 阅读  0 评论

面试官：如何实现两栏布局，右侧自适应？三栏布局中间自适应呢？

动感超人， 412 阅读  0 评论

实现三栏布局，中间自适应

倪成. 188 阅读  0 评论

css三栏布局——两边宽度固定中间宽度自适应方法总结

双飞翼布局 三个盒子浮动+中间盒子左右margin留位+左右负边距 .container{height: 500px;}.left{height:100%;width: 200px;background-color: skyblue;margin-left: -100%;}.wrapper{width:100%;height:100%;background-color: rgb...

css三栏布局 两边固定 中间自适应的五种方式_十九万里...

中间的container是一个三栏布局。 三栏布局两侧宽度固定不变,中间部分自动填充整个区域。 中间部分的高度是三栏中最高的区域的高度。 <!DOCTYPEhtml>body{min-width:550px;/* 2x leftContent width + rightContent width */font-weig...

五种方法实现三栏布局(左右固定中间自适应)_az44yao的博客

一、Float布局 布局分析: 布局方案实现优点缺点 Float布局左右中三列,左列左浮动,右列右浮动,中间列设置左右margin比较简单,兼容性也比较好浮动元素脱离文档流,使用的时候只需要注意一定要清除浮动。

三栏布局：左右固定，中间自适应的几种方式

浅墨、离殇 585 阅读  0 评论

flex布局实现头尾固定，中间内容自适应

清歌_ 989 阅读  0 评论

今日前端小知识——实现三栏布局（两侧固定宽度，中间自适应）的方法

ostuthere 651 阅读  0 评论

五种方法实现三栏布局（左右固定中间自适应）

程序媛啊啊啊 538 阅读  0 评论