共计 字 • 阅读约 min

1. 浮动布局

方式: 固定的盒子设置固定宽度和浮动,自适应盒子设置浮动

原理: div 默认是占满一整行,让其左浮动,就会自动拥有减去固定宽度盒子的宽

<div class="div1">
    <div class="left"></div>
    <div class="right"></div>
</div>
.div1{
    overflow: hidden;
}
.div1 .left{
    width:200px;
    height:300px;
    background:#f90;
    float:left;
}
.div1 .right{
    height:300px;
    background:#f00;
    margin-left:200px;
}

2. 使用 CSS 函数 calc 计算宽度

方式: 固定宽度的盒子设置定宽,自适应的盒子通过 calc 计算获得宽,然后通过浮动让元素成一行显示

原理: calc 可以计算出 100% 宽度减去固定盒子宽的宽,来达到自适应效果

<div class="div2">
    <div class="left"></div>
    <div class="right"></div>
</div>
.div2{
    width:100%;
    height:300px;
    overflow: hidden;
}
.div2 .left{
    width:200px;
    height:300px;
    background:#f90;
    float:left;
}
.div2 .right{
    height:300px;
    width:calc(100% - 200px); /*calc中运算符两边必须要有空格*/
    background:#FF0000;
    float:right;
}

3. flex 布局实现(需考虑兼容性)

方式: 父级盒子设置为弹性盒(display:flex),固定盒子设置宽度,自适应盒子设置 flex:1;

原理: 通过 flex 将元素呈现一行显示,并且自适应元素设置 flex:1,让其自动拥有铺满剩下宽度的特性

<div class="div3">
    <div class="left"></div>
    <div class="right"></div>
</div>
.div3{
    width:100%;
    display: flex;
}
.div3 .left{
    width:200px;
    height:300px;
    background:#f90;
}
.div3 .right{
    flex:1;
    height:300px;
    background: #ff0000;
    left:200px;
    top:0;
}

4. table 布局

方式: 父级元素设置为表格盒子,宽度 100%,子元素设置 display:table-cile,固定宽度盒子设置宽

原理: 该方法运用了表格的特性

<div class="div4">
    <div class="left"></div>
    <div class="right"></div>
</div>
.div4{
    display: table;
    width:100%;
}
.div4 .left{
    width:200px;
    height:300px;
    background: #f90;
    display: table-cell;
}
.div4 .right{
    background:#FF0000;
    height:300px;
    display: table-cell;
}

以上四种方法仅是我个人了解到的,肯定实现方式不止四种



文章更新于: 2021-2-13 15:5:52