CSS 列剪切

Question

正如您在底部图片中看到的那样，该列被截断了。

这是我的代码：

.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">7.00 USD</span>
    <span class="retailer pull-right">Revolve Clothing</span>
</div>

我找到了将 .dress-gallery 更改为显示为内联块的解决方案。但是由于image-overlay必须要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 的引用 fiddle，这让我来到这里：
Box-shadow trimmed in CSS columns in Chrome

从那个问题接受的答案中，我使用了他们的 fiddle:
http://jsfiddle.net/danield770/KxYRc/19/

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

CSS 列剪切

CSS column snipping

html

css

multiple-columns