双飞翼布局

最新推荐文章于 2022-09-26 01:25:24 发布

你真好看l

最新推荐文章于 2022-09-26 01:25:24 发布

阅读量102

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_40052011/article/details/103223536

版权

css 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
	<!--
	思想：1 浮动搭建布局  2margin调整三列在一行3在middle里加一个div,给这个div设置padding
	和圣杯布局的相同在于：
	都把主列放在文档流的最前面，优先加载
	都是通过浮动和负	margin形成三列布局
	
	和圣杯布局的不同在于处理中间列的位置：
	 圣杯通过给父容器左右padding和左右两列相对定位
	 双飞翼通过把中间列镶嵌在一个新的父级块，利用主列左右padding,不需要定位
	
	-->
    <style type="text/css">
		
    *{
        margin:0;
        padding:0;

    }
    #header,#footer{
        height:30px;
        background-color: gray;
    }
   
    #content .middle{
        width: 100%;
        background-color: goldenrod;

    }
    #content .middle .m_inner{
        padding:0 200px;

    }
    #content .left{
        width:200px;
        margin-left:-100%;
        background-color: aquamarine;

    }
    #content .right{
        width:200px;
        margin-left:-200px;

        background-color: aquamarine;

    }
    
    /*伪等高布局*/
    #content .middle,#content .left,#content .right{
        padding-bottom: 10000px;
        margin-bottom: -10000px;
       
        float:left;
    } 
    #content{
        overflow: hidden;

    }
    </style>
</head>
<body>
    <div id="header"></div>
    <div id="content">

        <div class="middle">
            <div class="m_inner">
                middle

            </div>
        </div>
        <div class="left">
			<h1>left</h1>
			<h1>left</h1>
			<h1>left</h1>
			<h1>left</h1>
			<h1>left</h1>
			<h1>left</h1>
		</div>
        <div class="right">right</div>


    </div>
    <div id="footer"></div>
    

</body>
</html>

在这里插入图片描述

你真好看l

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
双飞翼布局

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>双飞翼布局</title> <!-- 思想：1 浮动搭建布局 2margin调整三列在一行3在middle里加一个div,给这个div设置padding 和圣杯布局的相同在于：...
复制链接

扫一扫

专栏目录