首页 > 代码库 > css的双飞翼布局

css的双飞翼布局

双飞翼布局的大概意思就是左右两边的内容是固定的,大小是固定的,

而中间的布局的随着页面的大小变化而自动变化的。

通过代码来解析:

1.四个div,也可以使用section,其中main,left.right为同一级的元素,inner为main的子元素。

2.main,left,right均左浮动。

3.main的宽度为100%,即占满这个页面。

4.设置left的margin-left:-100%;既让left与main在同水平线上,处在最左边。

5.设置right的margin-left:-200px,其中200px为right的宽度,让right停在最右侧。

6.设置main的子元素inner,width与main一样,margin的顺序为上、右、下、左,所以margin:0px 200px 0px 200px,

表示离左边200px,离右边200px,其中前者为left的宽度,后者为right的宽度。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <title>双飞翼布局</title>
    <style>
        body {
            margin: 0px;
            padding: 0px;
            min-width: 500px;
        }
        
        #main {
            width: 100%;
            height: 200px;
            background-color: red;
            float: left;
        }
        
        #left {
            width: 200px;
            height: 200px;
            background-color: blue;
            float: left;
            margin-left: -100%;
        }
        
        #right {
            width: 200px;
            height: 200px;
            background-color: green;
            float: left;
            margin-left: -200px;
        }
        
        #inner {
            margin: 0px 200px 0px 200px;
            background-color: pink;
            height: 200px;
            word-break: break-all;
        }
    </style>
</head>

<body>

    <div id="main">
        <div id="inner">
fdsfsdfsdfsdf
fdsfsdfsdfsdf
fdsfsdfsdfsdf
fdsfsdfsdfsdf
fdsfsdfsdfsdf
</div> </div> <div id="left"></div> <div id="right"></div> </body> </html>

 

css的双飞翼布局