双飞翼布局

doa86365

于 2017-10-31 11:55:00 发布

阅读量115

点赞数

原文链接：http://www.cnblogs.com/like-dream/p/7760799.html

版权

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

实现关键在于margin-left：-100%

<!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">遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人；萍水相逢，尽是他乡之客。怀帝阍而不见，奉宣室以何年？嗟乎！时运不齐，命途多舛。冯唐易老，李广难封。屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？所赖君子见机，达人知命。老当益壮，宁移白首之心？穷且益坚，不坠青云之志。酌贪泉而觉爽，处涸辙以犹欢。北海虽赊，扶摇可接；东隅已逝，桑榆非晚。孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！勃，三尺微命，一介书生。无路请缨，等终军之弱冠；有怀投笔，慕宗悫之长风。舍簪笏于百龄，奉晨昏于万里。非谢家之宝树，接孟氏之芳邻。他日趋庭，叨陪鲤对；今兹捧袂，喜托龙门。杨意不逢，抚凌云而自惜；钟期既遇，奏流水以何惭？</div>
    <div class="left">豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。 </div>
    <div class="right">胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。</div>
</div>

</body>

<script>

</script>
</html>