视频二区调教中字知名国产,99视频在线永久免费观看

源代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float與clear</title>
    <style>
        div.div1{
            background-color: lightgreen;
        }
        div.div2{
            background-color: burlywood;
        }
        div.div3{
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
<h1>float與clear</h1>
<div class="div1">一行中并列顯示多個block 以前要使用要使用float與position 屬性 但是復雜了</div>
<div class="div2">所以出現(xiàn)了更加簡單的 inline-block屬性實現(xiàn)一行多個block</div>
<div class="div3">使用float并列div1與div2，div3在下面</div>
</body>
</html>

結(jié)果：這是沒加float屬性的時候

添加樣式后：

<style>
    div.div1{
        background-color: lightgreen;
        width: 100px;
        float: left;/*浮動在左邊*/
    }
    div.div2{
        background-color: burlywood;
        width: 100px;
        float: left;/*浮動在左邊*/
    }
    div.div3{
        background-color: lightskyblue;
    }
</style>

 
高度不一樣，怎么把div3放在div1與div2下面？
看代碼：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float與clear</title>
    <style>
        div.div{
            width: 400px;
        }
        div.div1{
            background-color: lightgreen;
            width: 200px;
            float: left;/*浮動在左邊*/
        }
        div.div2{
            background-color: burlywood;
            width: 200px;
            float: left;/*浮動在左邊*/
        }
        div.div3{
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
<h1>float與clear</h1>
<div class="div">
    <div class="div1">一行中并列顯示多個block 以前要使用要使用float與position 屬性 但是復雜了</div>
    <div class="div2">所以出現(xiàn)了更加簡單的 inline-block屬性實現(xiàn)一行多個block</div>
    <div class="div3">使用float并列div1與div2，div3在下面</div>
</div>
</body>
</html> 
div1 div2 div3的文字太短不具有代表性，換個長一點的就會出現(xiàn)這樣的結(jié)果： 
看到了吧就是這么奇特的半包圍結(jié)構(gòu)  那么問題來了  如何把div3排布的有點顏值？
看代碼：
主要是讓div3不受影響 在div3樣式加上
div.div3{
            background-color: lightskyblue;
            clear: both;
        }
----------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float與clear</title>
    <style>
        div.div{
            width: 400px;
        }
        div.div1{
            background-color: lightgreen;
            width: 200px;
            float: left;/*浮動在左邊*/
        }
        div.div2{
            background-color: burlywood;
            width: 200px;
            float: left;/*浮動在左邊*/
        }
        div.div3{
            background-color: lightskyblue;
            clear: both;
        }
    </style>
</head>
<body>
<h1>float與clear</h1>
<div class="div">
    <div class="div1">一行中并列顯示多個block 以前要使用要使用float與position 屬性 但是復雜了  一行中并列顯示多個block 以前要使用要使用float與position 屬性 但是復雜了  一行中并列顯示多個block 以前要使用要使用float與position 屬性 但是復雜了  一行中并列顯示多個block 以前要使用要使用float與position 屬性 但是復雜了  一行中并列顯示多個block 以前要使用要使用float與position 屬性 但是復雜了  </div>
    <div class="div2">所以出現(xiàn)了更加簡單的 inline-block屬性實現(xiàn)一行多個block 所以出現(xiàn)了更加簡單的 inline-block屬性實現(xiàn)一行多個block</div>
    <div class="div3">使用float并列div1與div2，div3在下面  在這個娛樂至死的時代，信息化發(fā)展迅猛，人們的生活方式也變得多姿多彩。與此同時，人們對娛樂的追求也變得越來越奇特，以致于有些老一輩的人感嘆道：“時代不同，娛樂也就不同啊！ 9月可以說是風云迭起，，一波未平一波又起，劉強東事件沒發(fā)生幾日。中國電商巨頭馬云又正式宣布阿里巴巴退出美國市場。這個消息的發(fā)布也就是說明阿里云，將不再把美國市場當成核心業(yè)務(wù)主要進行經(jīng)營，而是無限期的放棄美國市場！ 其實這個決定作為國人來說是相當支持的，與其讓美國再三刁難，還不如豁達一點，選擇主動放棄！畢竟中華民族是一個有血性的民族。</div>
</div>
</body>
</html> 
但是上面的方法都比較老了
下面教大家一個新的方法：
inline-float
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-block</title>
    <style>
        div.div1{
            background-color: lightgreen;
            width: 200px;
            display: inline-block;
        }
        div.div2{
            background-color: burlywood;
            width: 200px;
            display: inline-block;
        }
        div.div3{
            width: 400px;/*div1 div2的總寬度*/
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
<h1>inline-block</h1>
<div class="div">
    <div class="div1">一行中并列顯示多個block 以前要使用要使用float與position 屬性 但是復雜了  一行中并列顯示多個block 以前要使用要使用float與position 屬性 但是復雜了  一行中并列顯示多個block 以前要使用要使用float與position 屬性 但是復雜了  一行中并列顯示多個block 以前要使用要使用float與position 屬性 但是復雜了  一行中并列顯示多個block 以前要使用要使用float與position 屬性 但是復雜了  </div>
    <div class="div2">所以出現(xiàn)了更加簡單的 inline-block屬性實現(xiàn)一行多個block 所以出現(xiàn)了更加簡單的 inline-block屬性實現(xiàn)一行多個block</div>
    <div class="div3">使用float并列div1與div2，div3在下面  在這個娛樂至死的時代，信息化發(fā)展迅猛，人們的生活方式也變得多姿多彩。與此同時，人們對娛樂的追求也變得越來越奇特，以致于有些老一輩的人感嘆道：“時代不同，娛樂也就不同?。?9月可以說是風云迭起，，一波未平一波又起，劉強東事件沒發(fā)生幾日。中國電商巨頭馬云又正式宣布阿里巴巴退出美國市場。這個消息的發(fā)布也就是說明阿里云，將不再把美國市場當成核心業(yè)務(wù)主要進行經(jīng)營，而是無限期的放棄美國市場！ 其實這個決定作為國人來說是相當支持的，與其讓美國再三刁難，還不如豁達一點，選擇主動放棄！畢竟中華民族是一個有血性的民族。</div>
</div>
</body>
</html>
運行的結(jié)果： 
inline-float對齊方式是底部對齊
那么怎么把div2頂部對齊呢？
只需要
div.div2{
    background-color: burlywood;
    vertical-align:top;
    width: 200px;
    display: inline-block;
}
就行了 
完整的代碼：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>inline-block</title>
    <style>
        div.div1{
            background-color: lightgreen;
            width: 200px;
            display: inline-block;
        }
        div.div2{
            background-color: burlywood;
            vertical-align:top;
            width: 200px;
            display: inline-block;
        }
        div.div3{
            width: 400px;/*div1 div2的總寬度*/
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
<h1>inline-block</h1>
<div class="div">
    <div class="div1">一行中并列顯示多個block 以前要使用要使用float與position 屬性 但是復雜了  一行中并列顯示多個block 以前要使用要使用float與position 屬性 但是復雜了  一行中并列顯示多個block 以前要使用要使用float與position 屬性 但是復雜了  一行中并列顯示多個block 以前要使用要使用float與position 屬性 但是復雜了  一行中并列顯示多個block 以前要使用要使用float與position 屬性 但是復雜了  </div>
    <div class="div2">所以出現(xiàn)了更加簡單的 inline-block屬性實現(xiàn)一行多個block 所以出現(xiàn)了更加簡單的 inline-block屬性實現(xiàn)一行多個block</div>
    <div class="div3">使用float并列div1與div2，div3在下面  在這個娛樂至死的時代，信息化發(fā)展迅猛，人們的生活方式也變得多姿多彩。與此同時，人們對娛樂的追求也變得越來越奇特，以致于有些老一輩的人感嘆道：“時代不同，娛樂也就不同啊！ 9月可以說是風云迭起，，一波未平一波又起，劉強東事件沒發(fā)生幾日。中國電商巨頭馬云又正式宣布阿里巴巴退出美國市場。這個消息的發(fā)布也就是說明阿里云，將不再把美國市場當成核心業(yè)務(wù)主要進行經(jīng)營，而是無限期的放棄美國市場！ 其實這個決定作為國人來說是相當支持的，與其讓美國再三刁難，還不如豁達一點，選擇主動放棄！畢竟中華民族是一個有血性的民族。</div>
</div>
</body>
</html>
分享知識，分享快樂！希望中國站在編程之巔！
               ----融水公子
公眾微信號：rsgz520
360圖書館館號：rsgz002.360doc.com

本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。

免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版