014float的使用-CFANZ编程社区

014float的使用

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>float的使用</title>
        <link rel="stylesheet" href="../css/020.css">
    </head>
    <body>
        <div id="father">
            <div class="layer01"><img src="../../image/1.jpg" alt=""></div>
            <div class="layer02"><img src="../../image/1.jpg" alt=""></div>
            <div class="layer03"><img src="../../image/1.jpg" alt=""></div>
            <div class="layer04"><span>浮动可以向左也可以向右</span></div>
            
        </div>
    </body>
</html>

div {
    margin: 10px;
    padding: 5px;
}

#father {
    border: 1px #000 solid;
}

.layer01 {
    border: 1px #F000 dashed;
    display: inline-block;
    float: left;
}

.layer02 {
    border: 1px #000F dashed;
    display: inline-block;
    float: left;
}

.layer03 {
    border: 1px dashed #060;
    display: inline-block;
    float: left;
}

.layer04 {
    border: 1px dashed #666;
    font-size: 12px;
    line-height: 23px;
    /*设置以百分比计的行高：*/
    display: inline-block;
    float: left;
    /* clear: both;/*清除浮动，让元素既有浮动的效果又有块元素的效果*/ */
}

运行结果：

014float的使用_html

014float的使用_html_02

0 条评论