CSS双飞翼合理布局的两种方法完成示例

日期：2021-01-20 类型：科技新闻 

关键词：html网页制作，php网页制作，网页设计稿，网页编辑工具，学生网页设计模板

双飞翼合理布局，便是两边固定不动宽高，正中间自融入的3栏合理布局

先来张图，左侧和右侧的灰色块是固定不动宽高的，正中间翠绿色的地区是宽高自融入

方法1：根据flex延展性合理布局来完成

看编码

//HTML构造，div2是正中间的自融入地区
...
<body>
    <div class="wrap">
        <div class="div1"></div>  
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
</body>
...
*{  //先简易粗鲁的处理1下访问器的默认设置款式  
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing:border-box;   //应用border-box，盒实体模型好测算，妈妈不再用担忧我算不清块宽高了
}
.wrap{
    width: 100%;
    height: 100%;
    display: flex;     //应用延展性合理布局
    flex-flow:row nowrap;  //以沿主轴方位行显示信息，不换行，从而来显示信息3个块
    justify-content:space-around;  //这1个加和不叫实际上也没事，再加去的意思便是两边对齐
}

[class^='div']{  // 给全部的div都再加高和边框款式，便捷收看，要不然都缩成1条线了
    height: 400px;
    border: 1px solid #f00;
}

.div1,.div3{  //给两边的div固定不动的宽
    width: 200px;
    background-color: #ccc;
    flex-shrink: 1; //默认设置是1，因此无需写也没事，写出来自是表述这个意思
}
.div2{
    background-color: #0f0;
    flex-grow:1;  //这个较为关键，功效是让第2个块的宽度撑满剩下的室内空间
}

方法2：根据精准定位来完成

HTML构造不会改变，看款式

.wrap{
    width: 100%;  //一样完成宽高100%铺平
    height: 100%;
    position: relative;  //父层加上相对性精准定位，让子元素相对性父层来精准定位
}
[class^='div']{
    height: 400px;
    border: 1px solid #f00;
}
.div1,.div3{
    position: absolute;
    width: 200px;
    background-color: #ccc;
}
.div1{
    left: 0;  //固定不动在父层的左边
    top: 0;
}
.div3{
    right: 0;  //固定不动在父层的右边
    top: 0;
}
.div2{
    background-color: #0f0;
    /*这个是重要，大家沒有给正中间的div2加上过宽特性，因此默认设置占有父层宽的100%，
     因为两边块宽是固定不动的，因此正中间的自融入块上下各自200px的外边距正中间的content地区就会完成自融入*/
    margin: 0 200px;  
}

实际效果

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

上一篇：运用纯CSS完成垂直居中的7大气法示例 返回下一篇：没有了