HTML實現2列布局，左側寬度固定，右側自適應

時間 2019-12-05

原文原文鏈接

HTML實現2列布局，左側寬度固定，右側自適應html

實現一：佈局

<style>
    body, html{padding:0; margin:0;}
    // 根據CSS定位，利用浮動或絕對定位，使左側的塊元素脫離常規文檔流,能夠與右邊塊元素並列
    div:nth-of-type(1){
        float: left;           //利用浮動
        // postion: absolute;  //利用絕對定位
        // top: 0;
        // left: 0;
        width: 300px;
        height: 200px;
        background: red;
    }
    // 【塊級元素，默認自動填充父元素寬度，霸佔一行】
    // 當前：右側塊元素寬度=父元素寬度
    div:nth-of-type(2){
        // 設置margin-left爲左側塊元素的寬度。
        margin-left: 300px;
        // 如今：右側塊元素的寬度=父元素寬度-margin-left
        height: 220px;
        background: blue;
    }
</style>
<html>
    <div>div1</div>
    <div>div2</div>
</html>

1）設置margin-left以前

2）設置margin-left以後post

實現二：spa

<style>
    body, html{padding:0; margin:0;}
    // 根據CSS定位，利用浮動或絕對定位，使左側的塊元素脫離常規文檔流
    div:nth-of-type(1){
        float: left;           //利用浮動
        // postion: absolute;  //利用絕對定位
        // top: 0;
        // left: 0;
        width: 300px;
        height: 200px;
        background: red;
    }
    // FC是普通（常規）文檔流，格式化上下文，是頁面中的一塊渲染區域，有一套渲染規格。BFC是塊級格式化上下文。
    // 利用BFC塊級格式化上下文,創建一個隔離的獨立容器
    //【http://www.cnblogs.com/xiaohuochai/p/5248536.html】
    div:nth-of-type(2){
        // 改變overflow的值不爲visible，觸發BFC
        overflow: hidden;
        height: 220px;
        background: blue;
    }
</style>
<html>
    <div>div1</div>
    <div>div2</div>
</html>

相關標籤/搜索

每日一句

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