css如何使用float实现多栏布局

这篇文章主要介绍了css如何使用float实现多栏布局,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

创新互联主打移动网站、成都网站制作、做网站、网站改版、网络推广、网站维护、国际域名空间、等互联网信息服务,为各行业提供服务。在技术实力的保障下,我们为客户承诺稳定,放心的服务,根据网站的内容与功能再决定采用什么样的设计。最后,要实现符合网站需求的内容、功能与设计,我们还会规划稳定安全的技术方案做保障。

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


    1
    2
    3

css如何使用float实现多栏布局

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;
    }

感谢你能够认真阅读完这篇文章,希望小编分享的“css如何使用float实现多栏布局”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


当前题目:css如何使用float实现多栏布局
分享地址:http://pwwzsj.com/article/ihgshj.html

其他资讯