99精品国产在线热久久婷婷,亚洲Av无码专区国产乱码不卡

主頁 > 知識(shí)庫 > HTML實(shí)現(xiàn)2列布局(左側(cè)寬度固定，右側(cè)自適應(yīng))的方法示例

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

HTML實(shí)現(xiàn)2列布局，左側(cè)寬度固定，右側(cè)自適應(yīng)

實(shí)現(xiàn)一：

<style>
    body, html{padding:0; margin:0;}
    // 根據(jù)CSS定位，利用浮動(dòng)或絕對(duì)定位，使左側(cè)的塊元素脫離常規(guī)文檔流,可以與右邊塊元素并列
    div:nth-of-type(1){
        float: left;           //利用浮動(dòng)
        // postion: absolute;  //利用絕對(duì)定位
        // top: 0;
        // left: 0;
        width: 300px;
        height: 200px;
        background: red;
    }
    // 【塊級(jí)元素，默認(rèn)自動(dòng)填充父元素寬度，霸占一行】
    // 當(dāng)前：右側(cè)塊元素寬度=父元素寬度
    div:nth-of-type(2){
        // 設(shè)置margin-left為左側(cè)塊元素的寬度。
        margin-left: 300px;
        // 現(xiàn)在：右側(cè)塊元素的寬度=父元素寬度-margin-left
        height: 220px;
        background: blue;
    }
</style>
<html>
    <div>div1</div>
    <div>div2</div>
</html>

1）設(shè)置margin-left之前

2）設(shè)置margin-left之后

實(shí)現(xiàn)二：

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

標(biāo)簽：沈陽健身房揭陽福建那曲阿拉善盟銅陵湖南

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《HTML實(shí)現(xiàn)2列布局(左側(cè)寬度固定，右側(cè)自適應(yīng))的方法示例》，本文關(guān)鍵詞 HTML,實(shí)現(xiàn),2列,布局,左側(cè),；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。