CSS浮動(dòng)布局案例

發(fā)布時(shí)間：2020-07-28 20:53:57 來(lái)源：網(wǎng)絡(luò) 閱讀：756 作者：web_0315 欄目：web開(kāi)發(fā)

CSS浮動(dòng)布局案例

這里介紹下float布局的幾種常見(jiàn)布局方式，如果對(duì)基礎(chǔ)知識(shí)有疑問(wèn)可以去看一下上一篇文章CSS浮動(dòng)基礎(chǔ)知識(shí)

流體布局

顧名思義流體布局就是布局格式可以隨著窗口大小的變化而變化，具體實(shí)現(xiàn)如下

代碼演示(后續(xù)CSS代碼均在此代碼基礎(chǔ)上進(jìn)行修改)

<body>
    <div class="container clearfix">
        <main class="main">
            <div class="content"></div>
        </main>
        <aside class="aside" ></aside>
    </div>
    <p>testtesttest</p>
</body>
</html>

CSS代碼

    <style type="text/css">
        .main{
            width:100%;
            float:left;
        }
        .content{
            height:300px;
            margin:0 200px;
            background:yellow;
        }
        .aside{
            width:180px;
            height:300px;
            background:red;
            float:left;
            margin-left:-100%;
            /*流體布局的重點(diǎn)是邊欄的左邊距-100%，通過(guò)負(fù)值可以將元素強(qiáng)行拉到上一行*/
        }
    </style>

處理結(jié)果如下
CSS浮動(dòng)布局案例

向AI問(wèn)一下細(xì)節(jié)

CSS浮動(dòng)布局案例

CSS浮動(dòng)布局案例

流體布局

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽