双飞翼布局

Posted 2020-10-12

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了双飞翼布局相关的知识，希望对你有一定的参考价值。

由玉伯前辈提出，淘宝团队最开始运用，如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，left和right则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body{margin: 0px;}
.main{
    width: 100%;
    height: 198px;
    background-color: #aaa;
}
.center{
    margin-left: 198px;
    margin-right: 198px;
    float:left; 
    background-color: #fff;
}
.left{
    margin-left: -100%;
    float: left;
    width: 198px;
    height: 198px;
    background: red;
}
.right{
    margin-left:-198px;
    width: 198px;
    float: left;
    background-color: green;
}
</style>

<body>
<div class="main">
    <div class="center">html is very much! html is very much!html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much! html is very much!</div>
    <div class="left">html is very much! html is very much! </div>
    <div class="right">how old are you!how old are you!how old are you!how old are you!how old are you!how old are you!</div>
</div>

</body>

<script>

</script>
</html>

以上是关于双飞翼布局的主要内容，如果未能解决你的问题，请参考以下文章