简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 双飞翼布局0708
Blogger Information
Blog 12
fans 1
comment 0
visits 9795
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
双飞翼布局0708
简简单单的博客
Original
828 people have browsed it

理解双飞翼布局的几个关键点：

main是自适应宽度的，所以width:100%;

main、left、right都是float:left;，但是main的宽度是100%，所以left、right被挤到第二行；

如何让left和right移动到正确的位置呢？

理解时应该考虑浮动的特性，假设main是固定宽度的，全都左浮动以后，main、left、right应该排在同一行。

那么要让left移动到左边就容易了，只需要向左边移动一个main的宽度就可以了，所以就是margin-left:-100%;

因为main的宽度是100%，要让right移动到右边，则只需要给right一个200的宽度，让它移动上去就行了，所以就是margin-left:-200px;

此时，left和right实际上是叠在main的左右两边的，这就是在写结构时，要在main里面多写一层content的原因，只要给content一个margin:0 200px;里面的内容就不会被left和right挡住，双飞翼布局也就实现了。

双飞翼布局的好处：是淘宝团队提出一种优化写法，main写在前面，优先加载，优先渲染，而且兼容性好。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
.header {
    background-color: lightgray;
}
.wrap {
    width: inherit;
    min-height: 800px;
    background-color: cyan;
}
.header .content {
    width: 1000px;
    height: 60px;
    background-color: black;
    margin: 0 auto;
}
.header .content .nav {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}
.header .content .nav .mins {
    list-style-type: none;
}
.header .content .nav .mins a {
    float: left;
    min-width: 80px;
    min-height: 60px;
    line-height: 60px;
    color: white;
    padding: 0 15px;
    text-decoration: none;
    text-align: center;
}
.header .content .nav .mins a:hover {
    background-color: red;
    font-size: 1.1rem;
}
.container {
    width: 1000px;
    margin: 5px auto;
    background-color: lightgray;  
    border: 2px solid red;
    overflow: hidden;

}

.main {
    width: inherit;
    min-height: 800px;
    background-color: lightcyan;
}

.left {
    width: 200px;
    min-height: 800px;
    background-color: lightcoral;
}

.right {
    width: 200px;
    min-height: 800px;
    background-color: lightseagreen;
}
.wrap, .left, .right {
    float: left;
}

.left {
    margin-left: -100%;
}
.right {
    margin-left: -200px;
}

.main {
    padding-left: 200px;
    padding-right: 200px;
}
.footer {
    background-color: lightgray;
}

.footer .content {
    width: 1000px;
    height: 60px;
    background-color: #444;
    margin: 0 auto;
}
.footer .content p {
    text-align: center;
    line-height: 60px;
}

.footer .content  a {
    text-decoration: none;
    color: lightgrey;
}
.footer .content  a:hover {
    color: white;
}
    </style>
</head>
<body>
<!--头部-->
<div class="header">
    <div class="content">
        <ul class="nav">
            <li class="mins"><a href="">首页</a></li>
            <li class="mins"><a href="">公司新闻</a></li>
            <li class="mins"><a href="">产品中心</a></li>
            <li class="mins"><a href="">联系我们</a></li>
            <li class="mins"><a href="">关于我们</a></li>
        </ul>
    </div>
</div>
<div class="container">
<div class="wrap">
<div class="main">主体内容区</div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<!--底部-->
<div class="footer">
    <div class="content">
        <p>
            <a href="">版权所有</a>
            <a href="">电话信息233123</a>
            <a href="">网站的备案号1565</a>
        </p>
    </div>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！