双飞翼布局

博客

双飞翼布局key:float和margin-left:-100%。实现效果：两边固定宽度的侧栏悬浮在两侧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css" media="screen">
        *{
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
        }
        #main{
            background: blue;
            width: 100%;
            height: 500px;
            float: left;
        }
        aside{
            background: green;
        }
        #aside_left{
            width: 200px;
            height: 500px;
            float: left;
            margin-left: -100%;
        }
        #aside_right{
            width: 200px;
            height: 500px;
            float: left;
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <main id="main">#main</main>
    <aside id="aside_left">#aside_left</aside>
    <aside id="aside_right">#aside_right</aside>
</body>
</html>