CSS实现左侧固定，右侧自适应(5种方法)-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS实现左侧固定，右侧自适应(5种方法)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<div class="father">
      <!-- 左右div不能调换顺序来写 -->
    <div class="left">固定宽度区</div>
    <div class="right">自适应区</div>
</div>

一、利用左侧浮动float+右侧margin-left

 /* 利用浮动float+margin-left(左侧宽度需固定)*/
 /* 左边元素宽度固定(加入设置为300px)向左浮动 */
 /* 右边元素margin-left设置为100px，宽度不用设置 */
        .father{
            height: 300px;
        }
        .left{
            width: 300px;
            height: 300px;
            background-color: pink;
            float:left;   /*左侧设置浮动float*/
        }
        .right{
            margin-left: 300px;  /*右侧设置左边距margin-left等于左边盒子的宽度*/
            height: 300px;
            background-color: blue;
        }

二、利用左侧浮动float+右侧BFC

/* 利用浮动+BFC */
/* 左边元素宽度固定(假如设置为300px)，向左浮动  */
/* 右边元素设置overflow:hidden;  */
       .father {
           height: 300px;
        }
       .left {
           float: left;   /*左浮动，固定宽度*/
           width: 300px;
           height: 300px;
           background-color: pink;
        }
       .right {
           overflow:hidden;   /*设置 overflow:hidden触发BFC*/
           height: 300px;
           background-color: blue;
        }

三、利用flex布局

 /* 利用flex布局 */
 /* 父元素设置flex布局 */
 /* 左边元素宽度固定 */
 /* 右边元素设置flex:1 */
        .father {
           display:flex;     /* 父元素设置flex布局 */ 
           height:300px;
        }
       .left {
            width: 300px;
            background-color: pink;
        }
        .right {   
             flex:1;           /* 右边元素设置flex:1 */
             background-color: blue;
        }

四、利用grid布局

/* 利用grid布局 */
/* 父元素设置 display:gird; 属性、设置gird-template-columns:300px 1fr 属性*/
/* 表示第一列宽度始终为300px 第二列的宽度自适应 */
        .father {
           display:grid;    /*父元素设置 display:gird; */
           height:300px;
           grid-template-columns: 300px 1fr; /* 设置gird-template-columns:300px 1fr */
        }
       .left {
            background-color: pink;
        }
        .right {
             background-color: blue;
        }

五、利用定位

/* 利用绝对定位 */
/* 父级设置为相对定位，子级设置为绝对定位 */
/* 左边子元素设置left为0，宽度300，右边子元素right设置为0 */
        .father {
            position: relative;  /* 父级设置为相对定位 */
        }
       .left {
            position: absolute; /* 子级设置为绝对定位 */
            width: 300px;
            height: 300px;
            left: 0;           /* 左边子元素设置left为0*/
            background-color: pink;
        }
        .right { 
             position: absolute;  /* 子级设置为绝对定位 */
             left: 300px;
             right: 0;           /* 右边子元素right设置为0*/
             height: 300px;
             background-color: blue;
        }

实现效果：

CSS实现左侧固定，右侧自适应(5种方法),css,css3,前端文章来源地址https://www.toymoban.com/news/detail-653595.html