基於float的幾種佈局

時間 2019-12-08

標籤基於 float 幾種佈局欄目 CSS 简体版

原文原文鏈接

在這裏介紹基於float的幾種佈局.css

1.浮動與兩側自適應的佈局

如圖所示，左邊沒有限定寬度，右邊寬度自適應。使用table-cell實現的佈局，能夠適用於兩欄的佈局。

HTML代碼html

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>與浮動與兩側自適應的佈局</title>
</head>
<body>
<div class="container">
    <div class="left"><img src='1.jpg'></div>
    <div class="right">與浮動與兩側自適應的佈局與浮動與兩側自適應的佈局與浮動與兩側自適應的佈局與浮動與兩側自適應的佈局與浮動與兩側自適應的佈局與浮動與兩側自適應的佈局與浮動與兩側自適應的佈局</div>
</div>
</body>
</html>

對應的CSS代碼app

*{padding:0;margin:0;}
    .container{
            max-width:960px;
            margin:0 auto;
     }
    .left{
        float:left;
        margin-right:20px;
    }
    .right{
        height:220px;
        display: table-cell; /*像表格單元格同樣顯示*/
        width: 3000px;/*因爲是根據內容而決定寬度，當內容不是不少的時候， 寬度沒有被撐開，此時一些相對於這個元素定位的元素就會錯位，故設置足夠長的寬度，使其定位正常*/
        *width: auto;/*兼容IE六、7*/
        background:green;
    }

須要說明一點是：display: table-cell後，是根據內容來決定其實際的寬度。
table-cell在IE六、7中是不支持的，能夠使用*width:auto進行兼容性處理,不過如今這兩個版本IE的市場佔有率很低，適當的時候能夠刪去。佈局

2.右側尺寸固定的浮動佈局

分別有兩種方式，一種不改變DOM樹結構顯示順序，一種則會使DOM樹結構順序與顯示的界面相異。
spa

改變DOM樹前後順序的方法

HTML代碼code

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>浮動與右側尺寸固定的流體佈局</title>
</head>
<body>
<div class="container">
    <div class="right"></div>
    <div class="left">與右側尺寸固定的浮動佈局與右側尺寸固定的浮動佈局與右側尺寸固定的浮動佈局與右側尺寸固定的浮動佈局與右側尺寸固定的浮動佈局與右側尺寸固定的浮動佈局與右側尺寸固定的浮動佈局</div>
</div>
</body>
</html>

對應的CSS代碼htm

*{padding:0;margin:0;}
    .container{max-width:960px;margin:0 auto;overflow:hidden;}
    .left{
        margin-right:200px;
        background:red;
    }
    .right{
        width:200px;
        height:100px;
        float: right;
        background:green;
    }

關鍵點在於，HTML代碼中，把在右邊顯示的DIV放到左邊顯示的前面，而後經過float: right浮動到右邊，可經過調整left盒子的margin-right來調整兩個盒子之間的間距。
這種方式會破壞頁面優先渲染順序，它會先渲染右邊的盒子，再渲染左邊的盒子，視頁面區域內容重要程度而定。圖片

不改變DOM樹前後順序的方法

HTML代碼element

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>浮動與右側尺寸固定的流體佈局</title>
</head>
<body>
<div class="container">
    <div class="left">
<p class="left-content">
與右側尺寸固定的浮動佈局與右側尺寸固定的浮動佈局與右側尺寸固定的浮動佈局與右側尺寸固定的浮動佈局與右側尺寸固定的浮動佈局與右側尺寸固定的浮動佈局與右側尺寸固定的浮動佈局
</p>
</div>
    <div class="right"></div>
</div>
</body>
</html>

對應的CSS代碼it

*{padding:0;margin:0;}
    .container{max-width:960px;margin:0 auto;overflow:hidden;}
    .left{
            width:100%;
            float:left;
        background:red;
    }
    .right{
        width:200px;
        height:100px;
        float: left;
        margin-left:-200px;/*這個數值的大小是跟其寬度值相同的*/
        background:green;
    } 
    .left-content{
        margin-right:220px; //文字不被覆蓋
    }

關於negative margin（負邊距），w3c提到:

Given a large enough negative margin applied to a large enough element, the affected adjacent element can even be overlapped.

給定一個足夠大的負邊距，能夠使受影響的相鄰元素髮生重合。

3.單側固定的佈局

單側固定的佈局分爲固定佈局和流體佈局。
通用的HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動與右側尺寸固定的流體佈局</title>
</head>
<body>
<div class="container">
    <div class="left"></div>
    <div class="right">與右側尺寸固定的浮動佈局與右側尺寸固定的浮動佈局與右側尺寸固定的浮動佈局與右側尺寸固定的浮動佈局與右側尺寸固定的浮動佈局與右側尺寸固定的浮動佈局與右側尺寸固定的浮動佈局</div>
</div>
</body>
</html>

固定佈局

對應的CSS代碼

*{padding:0;margin:0;}
    .container{max-width:960px;margin:0 auto;overflow:hidden;}
    .left{
        width:100px;
        height:100px;
        float:left;
        background:red;
    }
    .right{
        width:100px;
        height:100px;
        float: right;
        background:green;
    }

經過float:left; float:right;實現。

流體佈局

對應的CSS代碼

*{padding:0;margin:0;}
    .container{max-width:960px;margin:0 auto;overflow:hidden;}
    .left{
        width:100px;
        height:100px;
        float:left;
        margin-right:20px;
        background:red;
    }
    .right{
        background:green;
    }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。