css3盒布局取代float布局

最新推荐文章于 2024-08-15 00:15:08 发布

xuanwuziyou

最新推荐文章于 2024-08-15 00:15:08 发布

阅读量4.2k

点赞数

分类专栏： Web前端技术

本文链接：https://blog.csdn.net/xuanwuziyou/article/details/48106843

版权

Web前端技术专栏收录该内容

115 篇文章 2 订阅

订阅专栏

下面来写一个布局，上面分三列,底部还有两个一列。

1. 用float浮动来写

注意，上面三个div都固定了宽度且向左浮动，红色div使用clear:both属性

问题来了：就是上面三个浮动的div，高度都没定义，所以它们的高度明显不一致。。

代码：

<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Float属性布局</title>
    <style>
        body{
            color:#fff;
        }
        div#centerbody{
            width:1000px;
            margin:auto;

        }
        div#left{
            float:left;
            width:300px;
            background-color: green;
        }
        div#center{
            float:left;
            width: 400px;
            padding: 10px;
            background-color: pink;
        }
        div#right{
            float:left;
            width: 300px;
            background-color: lightblue;
        }
        div#left,div#center,div#right{
            box-sizing: border-box; /*指定元素的宽度width和高度height的计算方法，border-box表示包含到border；content-box表示仅包含content是默认*/
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .footer{
            background-color: red;
            width: 1200px;
            height: 30px;
            margin:auto;

            clear:both;
        }
        .more{
            background-color: blue;
            height: 60px;
        }

    </style>
</head>
<body>
<div id="centerbody">
    <div id="left">
        <h2>栏目列表</h2>
        <ul>
            <li><a href="index.html">栏目名称</a></li>
            <li><a href="index.html">栏目名称</a></li>
            <li><a href="index.html">栏目名称</a></li>
            <li><a href="index.html">栏目名称</a></li>
        </ul>

    </div>
    <div id="center">
        始终坚持人民利益至上，是由社会主义初级阶段的主要矛盾决定的。我国社会主义制度建立后，社会的主要矛盾是人民日益增长的物质文化需要同落后的社会生产之间的矛盾。这就要求进一步解放和发展生产力，不断满足人民群众日益增长的物质文化需要。党的十八大以来，我们党坚持人民利益至上，深入把握社会主义初级阶段基本国情、社会主要矛盾、世界上最大发展中国家的国际地位“三个没有变”，坚持以经济建设为中心不动摇，坚持改革开放不动摇，进一步解放和发展生产力，不断满足人民群众物质文化需要，以更好更全面地实现人民幸福。

    </div>
    <div id="right">
        <h2>推荐文章</h2>
        <ul>
            <li><a href="index.html">推荐文章</a></li>
            <li><a href="index.html">推荐文章</a></li>
            <li><a href="index.html">推荐文章</a></li>
            <li><a href="index.html">推荐文章</a></li>
            <li><a href="index.html">推荐文章</a></li>
            <li><a href="index.html">推荐文章</a></li>
            <li><a href="index.html">推荐文章</a></li>
            <li><a href="index.html">推荐文章</a></li>
        </ul>
    </div>
</div>

<div class="footer">
    哈哈哈 该div使用 clear:both
</div>

<div class="more">
    还没完呢。
</div>


</body>
</html></span>

2. 把上面例子中的三个最上面浮动的div,定义同样的高度：height:226px，得到如下效果：

高度一样了，比刚才好多了，但是假设三栏中最高的栏的高度未知就不好办了。。

3.使用css3的盒布局，让三个浮动div的父元素来个display:-moz-box;display:-webkit-box;display:box;属性

不再用float和clear,也不必关注三个并列div的最大高度。可惜目前IE还不支持哈，但是效果真心不错

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Float属性布局</title>
    <style>
        body{
            color:#fff;
        }
        div#centerbody{
            width:1000px;
            margin:auto;

            /*三个并列div的父div使用display属性指定盒布局*/
            display:-moz-box;
            display: -webkit-box;
            display:box;

        }
        div#left{
            width:300px;
            background-color: green;
        }
        div#center{
            width: 400px;
            padding: 10px;
            background-color: pink;
        }
        div#right{
            width: 300px;
            background-color: lightblue;
        }
        div#left,div#center,div#right{
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
        .footer{
            background-color: red;
            width: 1200px;
            height: 30px;
            margin:auto;
        }
        .more{
            background-color: blue;
            height: 60px;
        }

    </style>
</head>
<body>
<div id="centerbody">
    <div id="left">
        <h2>栏目列表</h2>
        <ul>
            <li><a href="index.html">栏目名称</a></li>
            <li><a href="index.html">栏目名称</a></li>
            <li><a href="index.html">栏目名称</a></li>
            <li><a href="index.html">栏目名称</a></li>
        </ul>

    </div>
    <div id="center">
        始终坚持人民利益至上，是由社会主义初级阶段的主要矛盾决定的。我国社会主义制度建立后，社会的主要矛盾是人民日益增长的物质文化需要同落后的社会生产之间的矛盾。这就要求进一步解放和发展生产力，不断满足人民群众日益增长的物质文化需要。党的十八大以来，我们党坚持人民利益至上，深入把握社会主义初级阶段基本国情、社会主要矛盾、世界上最大发展中国家的国际地位“三个没有变”，坚持以经济建设为中心不动摇，坚持改革开放不动摇，进一步解放和发展生产力，不断满足人民群众物质文化需要，以更好更全面地实现人民幸福。

    </div>
    <div id="right">
        <h2>推荐文章</h2>
        <ul>
            <li><a href="index.html">推荐文章</a></li>
            <li><a href="index.html">推荐文章</a></li>
            <li><a href="index.html">推荐文章</a></li>
            <li><a href="index.html">推荐文章</a></li>
            <li><a href="index.html">推荐文章</a></li>
            <li><a href="index.html">推荐文章</a></li>
            <li><a href="index.html">推荐文章</a></li>
            <li><a href="index.html">推荐文章</a></li>
        </ul>
    </div>
</div>

<div class="footer">
    哈哈哈
</div>

<div class="more">
    还没完呢。
</div>


</body>
</html>