CSS布局——两列和三列布局

  • 时间:2018-08-04 21:29 作者:程序员小新人学习 来源:程序员小新人学习 阅读:250
  • 扫一扫,手机访问
摘要:两列布局一列固定宽度,另一列自适应宽度 如下图所示:第一列固定宽度200px,第二列自适应。代码效果用flex布局的写法代码效果同上三列布局边上两列固定宽度,中间自适应 注意html的写法,左右两列,也就是1,3列应该写在一起,中间列写在最后代码效果用flex布局的写法效果同上

两列布局

一列固定宽度,另一列自适应宽度

如下图所示:第一列固定宽度200px,第二列自适应。

代码

CSS布局——两列和三列布局

效果

CSS布局——两列和三列布局

用flex布局的写法

代码

CSS布局——两列和三列布局

效果同上

三列布局

边上两列固定宽度,中间自适应

注意html的写法,左右两列,也就是1,3列应该写在一起,中间列写在最后

代码

CSS布局——两列和三列布局

效果

CSS布局——两列和三列布局

用flex布局的写法

CSS布局——两列和三列布局

效果同上

  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】树莓派安装TensorFlow(2020-04-24 21:11)
【系统环境|服务器应用】防面试-SD_WebImage(2020-04-24 21:11)
【系统环境|服务器应用】推荐一款视频控件xgplayer(2020-04-24 21:11)
【系统环境|服务器应用】PostgreSQL 源码解读(27)- 查询语句#12(查询优化-上拉子链接#2)(2020-04-24 21:11)
【系统环境|服务器应用】如何轻松学习JavaScript?(2020-04-24 21:10)
【系统环境|服务器应用】【源码剖析】Launcher 8.0 源码 (12) --- Launcher 启动流程 第五步之计算桌面各布局细节参数(2020-04-24 21:10)
【系统环境|服务器应用】前台碰撞室之console.log与文本字符(2020-04-24 21:10)
【系统环境|服务器应用】好用的Middleware实现(2020-04-24 21:10)
【系统环境|服务器应用】前台面试每日 3+1 —— 第373天(2020-04-24 21:10)
【系统环境|服务器应用】绍圣--kafka之生产者(五)(2020-04-24 21:10)
手机二维码手机访问领取大礼包
返回顶部