双飞翼布局

最新推荐文章于 2022-07-13 18:48:30 发布

dalovehui

最新推荐文章于 2022-07-13 18:48:30 发布

阅读量375

点赞数

分类专栏： web前端文章标签： css 布局

本文链接：https://blog.csdn.net/qq_32000485/article/details/53790440

版权

web前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

双飞翼布局是一种灵活的布局，始于淘宝 UED。如果把三栏布局比作一只大鸟，可以把 main 看成是鸟的身体，sub 和extra 则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方。是对圣杯布局的一种改良。双飞翼布局让三列布局和两列布局更加有灵动性，更好的完善了 DIV+CSS 常见的布局。

<div class="atricle">
     <div class="left">
         我是左我是左我是左我是左我是左
     </div>
    <div class="right">
        我是右
    </div>
    <div class="middle">
    我是中间
    </div>
</div>

.atricle{
    background: green;
    height: 300px;
}
.atricle .left{
    float:left;
    background-color:darkgrey;
}
.atricle .middle{
    background:antiquewhite;
}


.atricle .right{
    background: darkmagenta;
    float: right;
}

文中是从上向下解析--所以 middle中间的部分才是最重要的 那么----

<div class="atricle">
    <div class="middle">
        我是中间
    </div>
     <div class="left">
         我是左我是左我是左我是左我是左
     </div>
    <div class="right">
        我是右
    </div>
</div>
.atricle{
    background: green;
    height: 300px;
}
.atricle .left{
    float:left;
    background-color:darkgrey;
}
.atricle .middle{
    background:antiquewhite;
}


.atricle .right{
    background: darkmagenta;
    float: right;
}

---怎么办呢----大家猜猜

把中间的middle设置成float:left 并且设置成width:100%;

神奇的事情发生了,,,,,,,,,如上图

具备了float元素的性质  也具备了块级元素的一些性质 就有了margin属性  左边的使用margin-left  右边的使用margin-right

进行负边距来配置---这里面的负100%是下图第二个图,是到上面头部的距离(是吧....)

下面再进行右边那个元素的左浮动来来来----(原来是右浮动) 一层层向上贴

此时右边的负边距就是自己的宽就好了

如图------------

好啦  基本的布局就实现了---额  发现什么了吗?中呢>>>>????中没了...

我们首先需要把他们占用的空隙liu出来...

下面再进行右边那个元素的左浮动来来来----(原来是右浮动) 一层层向上贴

大功告成----呃呃呃   如果  我们不想 使用relative怎么办----这--

嘻嘻 下一步------------

双飞翼布局 在middel中添加一个div元素

<div class="header">
     我是头
</div>
<div class="atricle">
    <div class="middle">
        <div class="inner">我是中间</div>  //添加的在此
    </div>
     <div class="left">
         我是左
     </div>
    <div class="right">
         我是右
    </div>
</div>
<div class="footer">
     我是尾部
</div>
.inner{
/*这个是真正的元素 */
    margin-right: 100px;
    margin-left: 150px;
}

如果左右两边想随着中间的块进行伸缩

那么可以使两边的高度无限大  并且

不影响其他外部的元素  加上overflow:hidden ;就可以了

附上源代码---写在一个文件了大家可以自己学习学习

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
<style type="text/css">
.header{
    background: orange;
    height: 150px;;
}

.atricle{
    background: green;
    height: 300px;
    /*padding-left: 150px;*/
    /*padding-right: 100px;*/
    overflow: hidden;
}


.atricle .left{
    float:left;
    background-color: mediumblue;
    width:150px;
    color: #0ed31c;
    height: 18px;

    margin-left: -100%;

    /*position: relative;*/
    /*left: -150px;*/

    margin-bottom: -9999px;
    padding-bottom: 9999px;

}

.atricle .right{
    background: darkmagenta;
    float: left;;
    width:100px;
    /*height: 18px;*/

    margin-left: -100px;
    /*position: relative;*/
    /*right: -100px*/

    margin-bottom: -9999px;
    padding-bottom: 9999px;

}

.atricle .middle{
    background:antiquewhite;
    width:100%;
    float: left;
    width: 100%;


}


.inner{
/*这个是真正的元素 */
    margin-right: 100px;
    margin-left: 150px;
}



.footer{
    background: #a7ff45;
    height: 150px;
}        
*{
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>
<div class="header">
     我是头
</div>
<div class="atricle">
    <div class="middle">
        <div class="inner">我是中间</div>
    </div>
     <div class="left">
         我是左
     </div>
    <div class="right">
        我是右我是右我是右我是右我是右我是右我是右我是右我是右我是右我是右我是右我是右我是右
    </div>
</div>
<div class="footer">
     我是尾部
</div>
</body>
</html>

下面再进行右边那个元素的左浮动来来来----(原来是右浮动) 一层层向上贴

dalovehui

关注

0
点赞
踩
0

收藏

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

本文由作者原创,所有理解为作者本人感悟如有错误,请留言双飞翼布局是一种灵活的布局，始于淘宝 UED。如果把三栏布局比作一只大鸟，可以把 main 看成是鸟的身体，sub 和extra 则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方。是对圣杯布局的一种改良。双飞翼布局让三列布局和两列布局更加有灵动性，更好的完善了 DIV+CSS 常见的布局。
复制链接

扫一扫