双飞翼布局

本文详细介绍了双飞翼布局的设计原理及实现方法,通过浮动左右边栏并调整中间栏内容,实现三栏自适应布局,重点突出中间内容的优先渲染。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

双飞翼布局


双飞翼布局: 同圣杯布局一样,要求三栏布局,中间宽度自适应,两边定宽,允许任意列高度最高。这样做的优势是重要的东西放在文本流前面可以优先渲染。
body部分如下

			<div class="middle">
               <div class="innerbox">//注意这里
                    <h4>我是middle</h4>
                <p>我是内容部分按道理来说我应该特别长长长长长长长长长长长长长长长长长长长长长长长长长长长长来证明我没有被我的左右兄弟遮挡</p>
               </div>
            </div>
        	<div class="left">
                    <h4>我是left</h4>
                    <p>我是left的内容</p>
                </div>
                <div class="right">
                    <h4>我是right的内容</h4>
                    <p>我是right的内容</p>
                </div>
    *{
			margin:0;
			padding:0;
		}
    header{
        height:40px;
        background-color: #b5c4b1;
        line-height:40px;
        text-align: center;		
        clear: both;	
            }
    div{
        text-align: center;
            }
    .middle,.left,.right{
                min-height: 300px;
            }
    .middle{
        width:100%;   
        background:#f8ebd8;
            }
    .left{
        width:200px;
        background: #ead0d1;
            }
    .right{
        width:200px;
        background:#9ca8b8;
            }

得到如下页面
在这里插入图片描述
给左右边栏添加浮动并让左右边栏去中间栏的两边。看似没毛病实际上此时中间栏的内容还是会被两边遮挡,只要稍加拖动就能看得出来,这时我们就应该操作一下中间栏的内容框了
在这里插入图片描述

/* 给内部div添加margin,把内容放到中间栏,其实整个背景还是100%*/ 
.innerbox{
    margin:0 200px 0 200px;
    height:100px;
}

现在就可以随意拖动了
在这里插入图片描述
完整代码:https://github.com/yutingbai/html-css-js/blob/master/布局/双飞翼.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值