HTML實現(xiàn)2列布局(左側寬度固定，右側自適應)的方法示例

來源：本站原創(chuàng)|時間：2020-01-10|欄目：CSS/HTML|點擊：次

HTML實現(xiàn)2列布局，左側寬度固定，右側自適應

實現(xiàn)一：

<style>
    body, html{padding:0; margin:0;}
    // 根據CSS定位，利用浮動或絕對定位，使左側的塊元素脫離常規(guī)文檔流,可以與右邊塊元素并列
    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;
        // 現(xiàn)在：右側塊元素的寬度=父元素寬度-margin-left
        height: 220px;
        background: blue;
    }
</style>
<html>
    <div>div1</div>
    <div>div2</div>
</html>

1）設置margin-left之前

2）設置margin-left之后

實現(xiàn)二：

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持我們。

上一篇：html頁面中完成查找功能

欄目：CSS/HTML

下一篇：HTML表格

本文標題：HTML實現(xiàn)2列布局(左側寬度固定，右側自適應)的方法示例

本文地址：http://www.jygsgssxh.com/a1/CSS_HTML/9522.html

更多CSS/HTML