文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

css3实现多栏布局的方法有哪些

2024-04-02 19:55

关注

本篇内容主要讲解“css3实现多栏布局的方法有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“css3实现多栏布局的方法有哪些”吧!

css3实现多栏布局的方法:1、利用float实现多栏布局;2、利用inline-block盒模型实现多栏布局;3、利用“display: flex”弹性布局实现多栏布局;4、利用“display: table”方式实现多栏布局。

css3实现多栏布局的方法有哪些

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

css实现多栏布局的几种方式

假如把下面的三个div显示在同一行

<div id="parent">
    <div id="box1">1</div>
    <div id="box2">2</div>
    <div id="box3">3</div>
</div>

css3实现多栏布局的方法有哪些

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水平呈现的元素间,换行显示或空格分隔的情况下会有间距。把空格去掉间隙自然就会消失,这样就不会显示间隔。

<div id="parent">
    <div id="box1">1</div><div id="box2">2</div><div id="box3">3</div>
</div>

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>。
display:table-cell 设置了该属性的元素会作为一个表格单元格显示,类似 <td> 和 <th>
可以用这一系列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实现多栏布局的方法有哪些”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯