CSS列剪

Question

正如您在图片底部看到的那样，列正在被剪短。

http://jsfiddle.net/eecvpru5/2/

这是我的代码：

.dress-gallery {
    position: relative;
    background: #FEFEFE;
    border: 2px solid #FAFAFA;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin-top: 1em;

    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
    -moz-column-break-inside: avoid; /* Firefox */
    column-break-inside: avoid; /* IE 10+ */

    .price {
        font-size: 0.8em;
        padding-left: 0.5em;
        font-weight: bold;
        color: #333;
    }

    .retailer {
        font-size: 0.8em;
        margin: 0.15em 0.5em;
        clear: both;
    }

    .list-count {
        padding-left: 0.5em;
        font-size: 0.8em;
    }

    .list-name {
        font-size: 0.8em;
        margin: 0.15em 0.5em;
        clear: both;
    }
}

.dress-gallery:hover .image-overlay {
    display: block;
}

.image-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0.5);
    display: none;
    text-align: center;
}

HTML：

<div class="dress-gallery" style="-webkit-column-break-inside:avoid;">
    <a href="#">        
        <img src="image.png" />
    </a>
    <div class="image-overlay">
        <div class="overlay-buttons">
            <a href="#">View</a>
            <a href="#">Buy</a>
        </div>
    </div>

    <span class="price">$127.00 USD</span>
    <span class="retailer pull-right">Revolve Clothing</span>
</div>

我已经找到了一种解决方案，可以将. solution图库更改为内联块。但是由于图像叠加必须需要服装画廊的位置是相对的，它将不能正确定位。

​

​

Answer 1

试着移除柱子间隙并移动到柔性盒模型：

http://jsfiddle.net/eecvpru5/4/

css

#column-gallery {
padding: 1em 2em;
background-color: #efefef;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
outline: none;

我使用了@maryis死人中引用的小提琴，这使我来到了这里：

Box-shadow trimmed in CSS columns in Chrome

从被接受的问题中，我用了他们的小提琴：

http://jsfiddle.net/danield770/KxYRc/19/

当我把它拷贝到你的FF上时，它似乎起作用了。您仍然需要根据您的特定需求和图像大小进行调整，但是包装现在已经没有了。