练习-CSS3 多栏(Multi-column)

CSS3 多栏(Multi-column)

理想效果

或者

实际效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Multi-column</title>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>
<body>
    <div id="hotels">
        <div class="box-item">
            <div class="item-image"><img src="../images/hotel-1.jpg" alt=""></div>
            <div class="item-title">某某</div>
            <div class="price-right"><span class="mark-price">￥<span class="mark-bigger">1000</span></span>起</div>
        </div>

        <div class="box-item">
            <div class="item-image"><img src="../images/hotel-2.jpg" alt=""></div>
            <div class="item-title">某某</div>
            <div class="price-right"><span class="mark-price">￥<span class="mark-bigger">1000</span></span>起</div>
        </div>
        <div class="box-item">
            <div class="item-image"><img src="../images/hotel-4.jpg" alt=""></div>
            <div class="item-title">某某</div>
            <div class="price-right"><span class="mark-price">￥<span class="mark-bigger">1000</span></span>起</div>
        </div>

    </div>
</body>
</html>
*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;}
html{height:100%;font-size:62.5%;}
body{height:100%;font-size:1.2rem;line-height:1.5;color:#333;
    background:-moz-linear-gradient(top, #09a9e5 44px, #f0eff4 350px, #f0eff4 100%);
    background:-webkit-linear-gradient(top, #09a9e5 44px, #f0eff4 350px, #f0eff4 100%);
    background:linear-gradient(top, #09a9e5 44px, #f0eff4 350px, #f0eff4 100%);background-color:#f9f9f9;}
a{text-decoration:none;}
a:hover{text-decoration:none;}
img{vertical-align:top;width:100%;}
dfn{font-style:normal;font-family:arial;}
i,em{font-style:normal;}
ul,li{list-style:none;}
input:focus{outline:none;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
header,footer{display:block;}

/*推荐hotels*/
#hotels{
    -moz-column-count:2; /* Firefox */
    -webkit-column-count:2; /* Safari and Chrome */
    column-count:2;
    padding: 10px;
    min-width: 240px;
}
#hotels .box-item{
    margin-bottom: 10px;
    font-size: 1.2rem;
    background-color: #fff;
    border-radius:5px;
    width: 100%;
    display:inline-block;
}
#hotels .box-item img{
    border-radius:5px 5px 0px 0px;
}
#hotels .box-item .item-title,
#hotels .box-item .price-right
{
    padding: 5px 8px;
}
#hotels .box-item .price-right
{
    text-align:right;
    font-size: 1rem;/*chrome下最小12px这个不生效*/
}
#hotels .box-item .price-right .mark-bigger
{
    font-size: 1.6rem;/*价钱字体偏大*/
    margin-right: 2px;/*与起字有点距离*/
}

练习初衷是想写一个瀑布流布局（不用滚动加载），而又不想用jQuery或者JavaScript。

CSS3的Multi-column布局，更是适合文本，或者等大小的inline-block。

如果大小不同，结果往往不尽人意。

实际显示因为box-item排放的顺序而不同，例如理想状态的第一个图，box-item就要按照大-小-大-小的顺序，理想状态的第二个图，就要按照大-小-大。

非理想的图就是因为排序为大-大-小，结果就不理想。

 

posted @ 2015-11-13 10:12  ElenaSun娇娃的逆袭  阅读(152)  评论(0)  编辑  收藏  举报