如何摆脱列下的空间?

时间:2015-01-23 18:52:26

标签: css dynamic-columns

我尝试过搜索,但我似乎无法找到任何相关信息。

当使用列并自动填充列时,底部有很多额外的空间。我如何摆脱它/最小化它?

示例:http://cssdeck.com/labs/cj76ienz

编辑:我无法摆脱chrome上的空间,似乎在firefox和IE上运行良好

edit2:代码

css:

 body {
    background: url(http://subtlepatterns.com/patterns/scribble_light.png) ;
}

#wrapper {
    width: 90%;
    max-width: 1100px;
    min-width: 300px;
    margin: 50px auto;
}

#columns {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    /*-moz-column-fill: auto;*/
    column-count: 3;
    column-gap: 10px;
    column-fill: auto;
}

.pin {
    display: inline-block;
    background: #FEFEFE;
    border: 2px solid #FAFAFA;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin: 0 2px 10px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 10px;
    padding-bottom: 5px;
    background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
    opacity: 1;

    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

.pin img {
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
    margin-bottom: 5px;
}

.pin p {
    font: 12px/18px Arial, sans-serif;
    color: #333;
    margin: 0;
}

@media (min-width: 320px) {
    #columns {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
}

@media (min-width: 768px) {
    #columns {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
}

@media (min-width: 960px) {
    #columns {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}

@media (min-width: 1100px) {
    #columns {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }
}

#columns:hover .pin:not(:hover) {
    opacity: 0.4;
}

HTML:

<div id="wrapper">
<div id="columns">
    <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed feugiat consectetur pellentesque. Nam ac elit risus, 
            ac blandit dui. Duis rutrum porta tortor ut convallis.
            Duis rutrum porta tortor ut convallis.
        </p>
    </div>

    <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
        <p>
            Donec a fermentum nisi. 
        </p>
    </div>

    <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
        <p>
            Nullam eget lectus augue. Donec eu sem sit amet ligula 
            faucibus suscipit. Suspendisse rutrum turpis quis nunc 
            convallis quis aliquam mauris suscipit.
        </p>
    </div>

    <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
        <p>
            Nullam eget lectus augue. Donec eu sem sit amet ligula 
            faucibus suscipit. Suspendisse rutrum turpis quis nunc 
            convallis quis aliquam mauris suscipit.
        </p>
    </div>

    <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
        <p>
            Donec a fermentum nisi. Integer dolor est, commodo ut 
            sagittis vitae, egestas at augue. 
        </p>
    </div>

    <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed feugiat consectetur pellentesque. Nam ac elit risus, 
            ac blandit dui. Duis rutrum porta tortor ut convallis.
            Duis rutrum porta tortor ut convallis.
        </p>
    </div>  

    <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
        <p>
            Nullam eget lectus augue. Donec eu sem sit amet ligula 
            faucibus suscipit. Suspendisse rutrum turpis quis nunc 
            convallis quis aliquam mauris suscipit.
            Duis rutrum porta tortor ut convallis.
        </p>
    </div>

    <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
        <p>
            Nullam eget lectus augue. 
        </p>
    </div>

    <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed feugiat consectetur pellentesque. 
        </p>
    </div>

    <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
        <p>
            Donec a fermentum nisi. Integer dolor est, commodo ut 
            sagittis vitae, egestas at augue. Suspendisse id nulla 
            ac urna vestibulum mattis. Duis rutrum porta tortor ut convallis.
        </p>
    </div>

    <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
        <p>
            Donec a fermentum nisi. Integer dolor est, commodo ut 
            sagittis vitae, egestas at augue. Suspendisse id nulla 
            ac urna vestibulum mattis. 
        </p>
    </div>

    <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed feugiat consectetur pellentesque. Nam ac elit risus, 
            ac blandit dui. Duis rutrum porta tortor ut convallis.
        </p>
    </div>  

    <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
        <p>
            Donec a fermentum nisi. Integer dolor est, commodo ut 
            sagittis vitae, egestas at augue. Suspendisse id nulla 
            ac urna vestibulum mattis. 
        </p>
    </div>

    <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
        <p>
            Donec a fermentum nisi. Integer dolor est, commodo ut 
            sagittis vitae, egestas at augue. Suspendisse id nulla 
            ac urna vestibulum mattis. 
        </p>
    </div>

    <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed feugiat consectetur pellentesque. Nam ac elit risus, 
            ac blandit dui. Duis rutrum porta tortor ut convallis.
        </p>
    </div>
</div>

0 个答案:

没有答案