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;  
}

实际效果

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