博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS实现三列布局
阅读量:4624 次
发布时间:2019-06-09

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

1.  使用float实现三列左右固定宽高,中间自适应宽度

 注意: 这里的right元素右浮动,center没有浮动,应该把右浮动的元素写在center前面才能实现三列效果,否则右浮动的元素会被挤向下一行;

2. 使用opsition实现

 注意: 这里的center一定要设置left和right,才能让中间内容区被撑开

3.flex布局实现

 注意: 这里的center要设置flex: 1;实现中间宽度自适应

4. table布局

 注意:要给父元素设置宽度百分百

5.双飞翼,利用margin负值实现

     
 注意:要在center外层包一个父元素,并给这个父元素设置float开启BFC,并且center部分代码要放在最前面,左右的无所谓 参考链接: https://blog.csdn.net/cinderella_hou/article/details/52156333       https://blog.csdn.net/weixin_40485972/article/details/78161022?utm_source=blogxgwz0

转载于:https://www.cnblogs.com/liuerpeng/p/9983378.html

你可能感兴趣的文章
Android的消息机制,用Android线程间通信的Message机制,Android中Handler的使用方法——在子线程中更新界面,handler机制...
查看>>
nodejs使用案例-mysql操作
查看>>
JavaScript的闭包
查看>>
NuGet学习笔记(1) 初识NuGet及快速安装使用
查看>>
js实现的几种继承方式
查看>>
javascript飞机大战-----002游戏引擎
查看>>
ajax的访问 WebService 的方法
查看>>
微信内置浏览器如何自动跳转其它浏览器
查看>>
Some Posts about Tree for MVC
查看>>
小程序参数传递
查看>>
初始面向对象
查看>>
在Ubuntu上安装Intellij IDEA并创建桌面快捷方式
查看>>
Spring框架学习之第2节
查看>>
linux的PAM认证和shadow文件中密码的加密方式
查看>>
java 生成订单号
查看>>
网站建设
查看>>
离别 李叔同
查看>>
SqlStoredProc池
查看>>
新手入门之——Ubuntu上的编辑器之神Vi / Vim
查看>>
使用 VS2013 Update 4 编译 NASM 2.11.08
查看>>