重庆分公司

• 首页
• 关于我们
• 服务项目
  

  高端网站定制

  

  微信定制

  

  APP开发服务

  

  网络营销服务

  

  电商网站建设

  

  生物医药网站建设

  

  外贸网站建设

  

  教育培训网站建设
• 小程序开发
• 案例展示
  

  网站建设

  

  小程序

  

  电商平台

  

  APP

  

  系统平台
• 建站知识
• 联系我们

咨询热线 ：

028-86922220

    1

1：float实现多栏布局

float属性控制目标HTML组件是否浮动以及如何浮动。设置该属性过后，对象会被当做块组件处理。float的取值一共有四个：left（向左浮动）、Right（向右浮动）、none（不浮动）、inherit（继承父元素值），将box1,box2,box3都设置成向左浮动，浮动元素的下一个兄弟元素如果也设置了同一浮动方向，则会紧随改元素显示。

设置了float之后，元素会脱离普通文档流。它们的父元素也不会被撑开，所以#parent的高度此时为0。

    #parent>div{
        border:1px solid black;
        float:left;
        width:200px;
        height:200px;
        text-align: center;
 
    }
   #box1{
       background-color:red;
   }
   #box2{
       background-color:yellow;
   }
    #box3 {
        background-color:blue;
    }

我们也可以这样，将box1,box2,设置成向左浮动，box3不浮动。由于box1,box2设置了浮动之后脱离了普通文档流。对box3来说就像前面不存在box1,box2一样，box3也会显示在这一行，但是会被box1遮挡住。设置box3的 margin-left:400px;可以让它看起来像是显示在box1,box2后面。这个时候#parent被box3撑开，高度此时为202px。

    #parent>div{
        border:1px solid black;
        width:200px;
        height:200px;
        text-align: center;
 
    }
    #box1{
       float:left;
        background-color:red;
    }
    #box2{
        float:left;
        background-color:yellow;
    }
    #box3 {
        margin-left:400px;
        background-color:blue;
    }

2：inline-block盒模型

inline-block盒模型的元素既不会占据一行，同时也支持用width、height指定宽度和高度。display:inline-block 将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。通常需要设置vertical-align：top使其顶端对齐。

    #parent>div{
        display:inline-block;
        border:1px solid black;
        width:200px;
        height:200px;
        text-align: center;
    }
    #box1{
        background-color:red;
    }
    #box2{
        background-color:yellow;
    }
    #box3 {
        background-color:blue;
    }

inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距。把空格去掉间隙自然就会消失，这样就不会显示间隔。

    123

3：display: flex 弹性布局

设置#parent容器的 diaplay:flex;父容器相当于一个弹性盒子。里面的div会按照flex-direction设置的模式排列。Flex弹性布局的功能就比较强大了，可以为盒状模型提供最大的灵活性实现复杂的布局，任何一个容器都可以指定为 Flex 布局。flex-direction属性决定主轴的方向，flex-direction: row;表示在父容器里横向排列，flex-direction: column;表示在父容器里纵向排列。

    #parent{
        display: flex;
        flex-direction: row;
    }
    #parent>div{
        border:1px solid black;
        width:200px;
        height:200px;
        text-align: center;
    }
    #box1{
        background-color:red;
    }
    #box2{
        background-color:yellow;
    }
    #box3 {
        background-color:blue;
    }

4：display: table

display:table     设置了该属性的元素作为块级表格来显示,类似

和

可以用这一系列table-row-group、table-header-group、table-footer-group、table-row等用其他标签实现类似于表格的布局。 #parent{         display: table;     }     #parent>div{         display:table-cell;         border:1px solid black;         width:200px;         height:200px;         text-align: center;     }     #box1{         background-color:red;     }     #box2{         background-color:yellow;     }     #box3 {         background-color:blue;     } 到此，相信大家对“css3实现多栏布局的方法有哪些”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！ 文章标题：css3实现多栏布局的方法有哪些 分享地址：http://cqcxhl.cn/article/gejhcp.html 其他资讯 简单介绍接口自动化测试----数据驱动测试ddt-创新互联 phpstorm使用-创新互联 实战MongoDB-Replication之ReplicaSet-创新互联 本地服务器需要通过本地公网出口访问到本地服务，防火墙配置处理-创新互联 javajavabean和List存储表格数据(用List存储类)-创新互联 分享至：     关于我们 公司简介 发展历程 服务项目 高端网站建设 小程序开发 APP开发 网络营销 建站知识 网站建设 网站设计 网站制作 小程序 联系我们 公司地址 人才招聘 成都 重庆  电话：028-86922220  地址：成都市太升南路288号锦天国际A幢1002号  电话：028-86922220  地址：重庆市南岸区弹子石腾龙大道58号2栋21-6 版权所有：成都创新互联科技有限公司重庆分公司 渝ICP备2021005571号-4  在线咨询  服务热线 服务热线：028-86922220  TOP