三栏布局中间自适应
一、使用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 评论