浮动布局demo

最新推荐文章于 2018-11-30 18:11:29 发布

weixin_30493401

最新推荐文章于 2018-11-30 18:11:29 发布

阅读量115

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lhl66/p/7528294.html

本文介绍了一种使用CSS浮动属性实现的两列及多行多列布局的方法。通过设置不同元素的浮动属性，可以轻松创建响应式的网页布局。文章提供了一个完整的HTML示例，包括header、nav、main区域以及footer的布局样式。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>浮动布局</title>
        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
            header{
                height: 150px;
                background: yellow;
            }
            nav{
                height: 30px;
                background: green;
            }
            .main{
                width: 1000px;
                background: red;
                /*height: 500px;*/
                margin: 0 auto;
                overflow: hidden;
            }
            /*两列/三列布局*/
            .left{
                width: 200px;
                height: 300px;
                background: blue;
                /*display: inline-block;*/
                float:left; /*脱离文档流 的布局方式*/
            }
            .right{
                width: 800px;
                height: 500px;
                background: pink;
                float: left;
                /*display: inline-block;
                vertical-align: top;*/
            }
            footer{
                height: 100px;
                background: gold;
            }
            /*多行多列布局*/
            .box{
                width: 240px;
                height: 100px;
                border: 1px black solid;
                float: left;
                margin: 10px;
                /*box-sizing: border-box;*/
            }
        </style>
    </head>
    <body>
        <header></header>
        <nav></nav>
        <div class="main">
            <div class="left"></div>
            <div class="right">
                <div class="content">
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                    <div class="box"></div>
                </div>
            </div>
        </div>
        <footer></footer>
    </body>
</html>