美文网首页
常见的布局实现,如弹性布局,两列、三列布局

常见的布局实现,如弹性布局,两列、三列布局

作者: Be_somebody | 来源:发表于2018-12-16 02:25 被阅读0次

两列布局

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

代码

效果

使用flex布局的写法

代码

三列布局

边上两列固定宽度,中间自适应
注意html的写法,左右两列,也就是1,3列应该写在一起,中间列写在最后

代码

效果

使用flex布局的写法

效果同上

转载:https://blog.csdn.net/ace_arm/article/details/81044582

相关文章

  • 常见的布局实现

    本章主要介绍常见的布局实现,包括: [1] 两列布局 [2] 三列布局 [3] 弹性 (Flex) 布局 [1] ...

  • 常见的布局实现,如弹性布局,两列、三列布局

    两列布局 一列固定宽度,另一列自适应宽度如下图所示:第一列固定宽度200px,第二列自适应。 代码 效果 使用fl...

  • 前端开发-常见CSS布局

    常见的两列布局 float浮动布局 flex布局 常见的三列布局 float浮动布局 position定位 fle...

  • CSS实现三栏布局

    CSS实现三栏布局(5种) 常见的布局方式: float布局、Position定位、table布局、弹性(flex...

  • 前端常见布局方式

    常见的布局方式 常见的布局这么几种单列水平居中布局, 一列定宽一列自适应布局, 两列定宽一列自适应布局, 两侧定宽...

  • 网页基本布局

    网页常见的几种简单布局 单列布局 两列布局 三列布局 通栏布局 单列布局 效果图: top{ }/宽度980px,...

  • css常见布局(二)

    采用flex实现两列,三列等多列的布局 一、两列布局 二、三列布局

  • CSS-布局1-浮动三列布局

    1、三列布局需求 网页中,常见的实现3列布局,左右两边宽宽固定,中间自适应的布局。本节介绍一种,最简单的实现思路,...

  • CSS布局

    布局方式 一列布局 效果: 二列布局 效果: 三列布局 效果: 混合布局 效果: 布局分析 1、标准流 常见块级元...

  • 三列布局之圣杯布局、双飞翼布局

    圣杯布局 双飞翼布局 使用flex弹性布局实现

网友评论

      本文标题:常见的布局实现,如弹性布局,两列、三列布局

      本文链接:https://www.haomeiwen.com/subject/mmazhqtx.html