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>

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