首页 » CSS » CSS实现瀑布流等分布局效果,兼容各大主流浏览器

CSS实现瀑布流等分布局效果,兼容各大主流浏览器

原文 http://blog.csdn.net/CodingNoob/article/details/78772242

2017-12-12 02:00:14阅读(307)

效果如下:

<a href=CSS实现瀑布等分布局效果,兼容各大主流浏览器" src="http://img.blog.csdn.net/20171211141335939?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQ29kaW5nTm9vYg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="这里写图片描述" title="">

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>首页</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        body{background:#eee;}
        *{padding:0;margin:0;}
        .main{width:1200px;margin:50px auto;}
        .main::after{content:"";display:block;clear:both;}
        .main .column-item{width:1200px;}/*不用设置高度*/
        .main .mg0{margin-right:0;}
        .main .column-item .box{float:left;width:292px;/*=(1200-30)/4 = 292.5*/padding:0 5px;}/*关键点,因为column-item不设置高度,所以只要设置float:left;那么所有的box就会向左边浮动,得到所需的4分列效果*/
        .main .column-item .pl0{padding-left:0;}/*头尾两边都要清掉相应以便的padding,不然不会得到4分等列效果*/
        .main .column-item .prl0{padding-right:0;}
        .footer{height:50px;width:1200px;margin:50px auto;background:blue;clear:both;font-size:40px;color:#fff;text-align: center;}
    </style>
</head>
<body>
    <div class="main">
        <div class="column-item">
            <div class="box pl0">
                <div>1</div>
                <div>2</div>
            </div>
        </div>
        <div class="column-item">
            <div class="box">
                <div>2</div>
                <div>1</div>
            </div>
        </div>
        <div class="column-item">
            <div class="box">
                <div>2</div>
                <div>3</div>
            </div>
        </div>
        <div class="column-item mg0">
            <div class="box prl0">
                <div>3</div>
                <div>3</div>
            </div>
        </div>
    </div>
    <div class="footer">footer</div>
</body>
</html>

总结:

实现相应的效果关键点在两点

1、.main .column-item{width:1200px;}/不用设置高度/,因为不设置高度,所以说4个.main .column-item都会叠加在一起

2、.main .column-item .box{float:left;}因为设置了左浮动,所以设置相应的等分,就会出现4个等分布局的情况,至于为什么,得好好去理解float的原理 推介看下 float属性的理解

3、.main .column-item .pl0{padding-left:0;} .main .column-item .prl0{padding-right:0;}/头尾两边都要清掉相应以便的padding,不然不会得到4分等列效果/

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹