HTML实现2列布局(左侧宽度固定,右侧自适应)的方法

这篇文章主要介绍了HTML实现2列布局(左侧宽度固定,右侧自适应)的方法示例的相关资料,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。

《HTML实现2列布局(左侧宽度固定,右侧自适应)的方法》

HTML实现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;
    }
    // 【块级元素,默认自动填充父元素宽度,霸占一行】
    // 当前:右侧块元素宽度=父元素宽度
    div:nth-of-type(2){
        // 设置margin-left为左侧块元素的宽度。
        margin-left: 300px;
        // 现在:右侧块元素的宽度=父元素宽度-margin-left
        height: 220px;
        background: blue;
    }//在此我向大家推荐一个前端全栈开发交流圈:619586920  突破技术瓶颈,提升思维能力
</style>
<html>
    <div>div1</div>
    <div>div2</div>
</html>

(1)设置margin-left之前

《HTML实现2列布局(左侧宽度固定,右侧自适应)的方法》

(2)设置margin-left之后

《HTML实现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是普通(常规)文档流,格式化上下文,是页面中的一块渲染区域,有一套渲染规格。BFC是块级格式化上下文。
    // 利用BFC块级格式化上下文,建立一个隔离的独立容器
    div:nth-of-type(2){
        // 改变overflow的值不为visible,触发BFC
        overflow: hidden;
        height: 220px;
        background: blue;
    }//在此我向大家推荐一个前端全栈开发交流圈:619586920  突破技术瓶颈,提升思维能力
</style>
<html>
    <div>div1</div>
    <div>div2</div>

结语

感谢您的观看,如有不足之处,欢迎批评指正。

获取资料

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:619586920,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

    原文作者:前端攻城小牛
    原文地址: https://www.jianshu.com/p/1c01645442f8
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞