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

css的双飞翼布局

2024-09-26 19:32:02   213人阅读

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

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

通过代码来解析：

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的双飞翼布局


联系
我们