双飞翼布局,就是两端固定宽高,中间自适应的三栏布局

先来张图,左边和右边的灰色块是固定宽高的,中间绿色的区域是宽高自适应

CSS双飞翼布局的两种方式实现示例

方式一:通过flex弹性布局来实现

看代码

//HTML结构,div2是中间的自适应区域
...
<body>
    <div class="wrap">
        <div class="div1"></div>  
        <div class="div2"></div>
        <div class="div3"></div>
    </div>
</body>
...
*{  //先简单粗暴的解决一下浏览器的默认样式  
    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;  //这一个加和不叫其实也没事,加上去的意思就是两端对齐
}

[class^='div']{  // 给所有的div都加上高和边框样式,方便观看,不然都缩成一条线了
    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;  //这个比较重要,作用是让第二个块的宽度撑满剩余的空间
}

方式二:通过定位来实现

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双飞翼布局的两种方式实现示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
css双飞翼布局,双飞翼布局,双飞翼的布局

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
评论“CSS双飞翼布局的两种方式实现示例”
暂无“CSS双飞翼布局的两种方式实现示例”评论...

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。