HTML完成2列合理布局(左边宽度固定不动，右边自

HTML完成2列合理布局，左边宽度固定不动，右边自融入

完成1：

<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;
    }
    // 【块级元素，默认设置全自动填充父元素宽度，占据1行】
    // 当今：右边块元素宽度=父元素宽度
    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以后

完成2：

<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是一般（基本）文本文档流，文件格式化左右文，是网页页面中的1块3D渲染地区，有1套3D渲染规格型号。BFC是块级文件格式化左右文。
    // 运用BFC块级文件格式化左右文,创建1个防护的单独器皿
    div:nth-of-type(2){
        // 更改overflow的值不为visible，开启BFC
        overflow: hidden;
        height: 220px;
        background: blue;
    }
</style>
<html>
    <div>div1</div>
    <div>div2</div>
</html>

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。