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>

我找到了一个解决方案来更改.dress-gallery以显示为内联块。但由于图像叠加必须要求连衣裙的位置是相对的，否则它将无法正确定位。

Answer 1

尝试删除柱间隙并移至flexbox模型：

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;

我使用@maryisdead中引用的小提琴，这导致我来到这里：
Box-shadow trimmed in CSS columns in Chrome

从那些问题接受了回答，我用了他们的小提琴：
http://jsfiddle.net/danield770/KxYRc/19/

当我把它复制到你的FF上时，似乎有效。您仍然需要根据您的特定需求和图像大小进行调整，但现在包装已经消失。