博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS布局1:用三个div实现左右两列固定,中间自适应
阅读量:6610 次
发布时间:2019-06-24

本文共 517 字,大约阅读时间需要 1 分钟。

hot3.png

解决方法1:浮动

  • 将左右两列的宽度设置为固定值,左边第一个的div左浮动,右边的元素有浮动;
  • 但此时,由于第一个元素浮动,中间的元素未浮动,所以第一个div会覆盖在第二个div上,并且挤掉第二个div的内容,
  • 由于浮动的元素脱离文档流,所以第三个div,会掉下去;所以只要将第二个没有浮动的div放在最后即可,这样在设置它的margin即可;
    
三列布局

解决方法2:弹性盒模型 (必须加一个父模型,才可以用!!!!!),将父元素转化为为弹性盒模型(display:flex;) 在子元素中写占的份数;

    
三列布局

解决方法3:定位:将左右固定的div先用绝对定位(此时相对于body定位,脱离文档流)固定,再设置中间元素的左右margin;

    
三列布局
22

转载于:https://my.oschina.net/u/4045971/blog/3025764

你可能感兴趣的文章
B站,N站,汤站,爬虫下载资源总结与技巧(二)
查看>>
QuickBI助你成为分析师——数据源FAQ小结
查看>>
速记 UWP Unit Test 异常:ailed to initialize client proxy: could not connect to test process
查看>>
十周三次课
查看>>
解读POI操作之表格导出(生成多个sheet)
查看>>
安装redis 解压后的文件及操作
查看>>
Docker安装mysql8主从结构
查看>>
S/4HANA服务订单Service Order的批量创建
查看>>
iOS ShareSDK桥接技术
查看>>
spring源码解析bean定义@Configuration、@Import、@Bean(2)
查看>>
技术工坊|WASM应用区块链虚拟机的技术实践(上海)
查看>>
常见前端面试题
查看>>
工业大数据分析平台的应用价值探讨
查看>>
一周第五次课(系统目录结构、ls命令、文件类型、alias命令 )
查看>>
NFS搭建 (资源)
查看>>
shell实例100例《八》
查看>>
《自卑与超越》读书笔记优秀范文3200字
查看>>
零基础入门Python爬虫不知道怎么学?这是入门的完整教程
查看>>
整合spring cloud云服务架构 - 企业分布式微服务云架构构建
查看>>
【Visual Studio 扩展工具】使用 ComponentOne迷你图控件,进行可视化数据趋势分析...
查看>>