双飞翼布局

双飞翼布局即三栏布局,左右两边宽度自适应,中间自适应且先加载
<style>
*{
margin: 0;
padding: 0;
}
div{
float: left;
}
.container{
width: 100%;
}
.center{
width: 100%;
height: 100px;
background: lightcoral;
margin-left: 200px;
margin-right: 200px;
}
.left{
width: 200px;
height: 100px;
background: lime;
margin-left: -100%;
}
.right{
width: 200px;
height: 100px;
background: lightseagreen;
margin-left: -200px;
}
</style>

<div class="container"><div class="center">中间</div></div>
<div class="left">左边</div>
<div class="right">右边</div>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 实现圣杯布局和双飞翼布局,“负边距”是必不可少的。 了解圣杯布局和双飞翼布局之前,我们先来了解下负边距。一、定义:...
    betterwlf阅读 875评论 0 11
  • 圣杯布局 圣杯布局需要用到相对定位。 前提条件:1、中间内容包含左中右三部分。而且中间必须放在最前面。2、设置中间...
    exertmyself阅读 492评论 1 1
  • 圣杯布局和双飞翼布局其实是一回事。 它们实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固...
    zhanggongzi阅读 260评论 0 0
  • 事实上,圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常...
    耦耦阅读 620评论 0 2
  • 人生路漫漫,何为喜,何为愁,有人笑有人悠,人生几十莫离愁,红灯笼,灯笼青焰短,香印白灰销。 古匣收遗施,行廊画本朝...
    逍遥浪子了凡阅读 593评论 1 2

友情链接更多精彩内容