css常見自適應佈局

1.兩列布局，左側寬度固定，右側寬度自適應

　1.1.左側進行浮動，右側設置margin-left

/*    1.利用浮動進行佈局*/
    .left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: cornflowerblue;
    }
    .right {
        margin-left: 200px;
        height: 200px;
        background-color: bisque;
    }
    <div class="left"></div>
    <div class="right"></div>

　　

1.2.利用絕對定位來代替浮動

/*    2.利用絕對定位進行佈局*/
    .wrap {
        position: relative;
    }
    .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        background-color: cornflowerblue;
    }
    .right {
        margin-left: 200px;
        height: 200px;
        background-color: bisque;
    }
    <div class="wrap">
        <div class="left"></div>
        <div class="right"></div>
    </div>

　　

 

2.兩列布局，右側寬度固定，左側寬度自適應

2.1.利用浮動進行佈局

/*    1.利用浮動進行佈局*/
    .left {
        margin-right: 200px;
        height: 200px;
        background-color: cornflowerblue;
    }
    .right {
        float: right;
        width: 200px;
        height: 200px;
        background-color: bisque;
    }
    <div class="right"></div>
    <div class="left"></div>

注：right要寫在left的前面，不然會出現以下問題。而後百度了下，終於找到了以下一段話（首先要明白浮動元素只對後面元素有影響，浮動元素自己並不浮動，只是脫離文檔流，後面的元素會上移而佔據浮動元素的位置）

2.2.利用絕對定位進行佈局

/*    2.利用絕對定位進行佈局*/
    .wrap {
        position: relative;
    }
    .left {
        margin-right: 200px;
        height: 200px;
        background-color: cornflowerblue;
    }
    .right {
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        height: 200px;
        background-color: bisque;
    }
    <div class="wrap">
        <div class="left"></div>
        <div class="right"></div>
    </div>

 

 

3.三列布局，中間寬度固定，兩側寬度自適應

/*    1.常規實現方式*/
　　 .wrap {
　　 　　overflow: hidden;　
　　 }
    .left,
    .right {
        width: 50%;
        height: 200px;
        background-color: cornflowerblue;
    }
    .left {
        margin-left: -300px;
        float: left;
    }
    .right {
        margin-right: -300px;
        float: right;
    }
    .center {
        margin: 0 auto;
        width: 600px;
        height: 200px;
        background-color: bisque;
    }

　　<div class="wrap">
　　　　<div class="right"></div>
　　　　<div class="left"></div>
　　　　<div class="center"></div>
　　</div>

 

4.三列布局，中間寬度自適應，兩側寬度固定

4.1.利用浮動實現

/*    1.浮動實現方式*/
        .left,
        .right {
            width: 300px;
            height: 200px;
            background-color: cornflowerblue;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
        .center {
            margin: 0 300px;
            height: 200px;
            background-color: bisque;
        }
        <div class="right"></div>
    <div class="left"></div>
    <div class="center"></div>

4.2.利用絕對定位實現

/*    2.絕對定位方式實現*/
        .left,
        .right {
            position: absolute;
            top: 0;
            width: 300px;
            height: 200px;
            background-color: cornflowerblue;
        }
        .left {
            left: 0;
        }
        .right {
            right: 0;
        }
        .center {
            margin: 0 300px;
            height: 200px;
            background-color: bisque;
        }
        <div class="right"></div>
        <div class="left"></div>
        <div class="center"></div>

5.兩列，左右等高顯示

        .wrap {
            overflow: hidden;
        }
        .left,
        .right {
            margin-bottom: -10000px;
            padding-bottom: 10000px;
        }
        .left {
            background-color: cornflowerblue;
        }
        .right {
            float: right;
            width: 400px;
            background-color: bisque;
        }
        <div class="wrap">
        <div class="right">
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>定width屬性。另外指定元素時儘可能使用em而不是px作單位。</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>定width屬性。另外指定元素時儘可能使用em而不是px作單位。</p>
        </div>
        <div class="left">
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>定width屬性。另外指定元素時儘可能使用em而不是px作單位。</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>定width屬性。另外指定元素時儘可能使用em而不是px作單位。</p> <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>定width屬性。另外指定元素時儘可能使用em而不是px作單位。</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>定width屬性。另外指定元素時儘可能使用em而不是px作單位。</p> <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>定width屬性。另外指定元素時儘可能使用em而不是px作單位。</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>
            <p>10. 是否忘記了寫DTD?</p>定width屬性。另外指定元素時儘可能使用em而不是px作單位。</p>
        </div>
    </div>

注：以上例子均是在簡單的清除了默認樣式的狀況下進行的

    * {
            margin: 0;
            padding: 0;
            color: #fff;
        } 

各位看官，有錢的捧個錢場，沒錢的捧我的場，要是以爲好就打賞點吧，hey hey hey！！！