CSS浮動佈局案例

時間 2020-01-18

標籤 css 浮動佈局案例欄目 CSS 简体版

原文原文鏈接

CSS浮動佈局案例

這裏介紹下float佈局的幾種常見佈局方式，若是對基礎知識有疑問能夠去看一下上一篇文章CSS浮動基礎知識css

流體佈局

顧名思義流體佈局就是佈局格式能夠隨着窗口大小的變化而變化，具體實現以下html

代碼演示(後續CSS代碼均在此代碼基礎上進行修改)ide

<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%;
            /*流體佈局的重點是邊欄的左邊距-100%，經過負值能夠將元素強行拉到上一行*/
        }
    </style>

處理結果以下
code

1. css浮動案例
2. CSS浮動案例
3. css 浮動佈局，清除浮動
4. CSS佈局 0x3 浮動佈局
5. CSS——浮動佈局與定位佈局
6. CSS浮動佈局-float
7. CSS浮動佈局詳解
8. CSS佈局及浮動
9. CSS之浮動佈局（float，浮動原理，清除/閉合浮動方法） css之浮動佈局
10. 【CSS】深入理解CSS浮動佈局
更多相關文章...
• ionic 浮動框 - ionic 教程
• W3C CSS 活動 - W3C 教程
• 常用的分佈式事務解決方案
• JDK13 GA發佈：5大特性解讀

相關標籤/搜索