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

來(lái)源：本站原創(chuàng)|時(shí)間：2020-01-10|欄目：CSS/HTML|點(diǎn)擊：次

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ī)）文檔流，格式化上下文，是頁(yè)面中的一塊渲染區(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í)有所幫助，也希望大家多多支持我們。

上一篇：html頁(yè)面中完成查找功能

欄目：CSS/HTML

下一篇：HTML表格

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

本文地址：http://mengdiqiu.com.cn/a1/CSS_HTML/9522.html

更多CSS/HTML

欧美大屁股bbbbxxxx,狼人大香伊蕉国产www亚洲,男ji大巴进入女人的视频小说,男人把ji大巴放进女人免费视频,免费情侣作爱视频

CSS/HTML

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

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀

欧美大屁股bbbbxxxx,狼人大香伊蕉国产www亚洲,男ji大巴进入女人的视频小说,男人把ji大巴放进女人免费视频,免费情侣作爱视频

CSS/HTML

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

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀

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