Question

对于我正在做的小项目，我正在使用css3列数创建一个砖石风格的图片板。这非常有效，并创建了我想要使用的4列。

我的问题是，填充卡片的图像仅在第1列中呈现。其余的，他们是他们的，如果我click和drag或右键点击它提供图片网址/ thumbnail。在firefox和internet explorer中，这会正确呈现，图片会显示在每一列中，而不是在Chrome上。

我的图片的 html 如下：

<div class="col s12 masonry">
    <div class="masonryItem card" ng-repeat="photo in RecentPhotos">

        <div class="card-image">
            <img ng-src="Assets/images/Photos/{{photo.fileName}}">
            <span class="card-title" ng-hide="photo.editing">{{photo.name}}</span>
            <input class="card-title" title="Title" type="text" ng-model="photo.name" ng-show="photo.editing" ng-blur="updatePhoto(photo)" autofocus/>
        </div>
        <div class="card-content">
            <p ng-hide="photo.editing">
                {{photo.description}}
            </p>
            <input title="Description" type="text" ng-model="photo.description" ng-show="photo.editing" ng-blur="updatePhoto(photo)" autofocus/>
        </div>
        <div class="card-action">
            <a href="" ng-click="editPhoto(photo)">Edit</a>
        </div>

    </div>
</div>

masonry类的 css 如下：

.masonry {
 /* Masonry container */
    column-count: 4;
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-gap: 1em;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-fill: auto;
    -moz-column-fill: auto;
    -webkit-column-fill: auto;
}

.masonryItem {
 /* Masonry bricks or child elements */
    background-color: #eee;
    display: inline-block;
    margin: 0 0 1em;
    width: 100%;
}

很遗憾，我无法在此处上传截图，因此无法向您展示我的实际网站，但 JSfiddle

证明问题。虽然图像实际上并没有在那里，但你可以看到第一列有“破碎的图像”链接，但其余部分没有尽管链接了图像。

Answer 1

尝试从overflow: hidden类

中删除.card

.card {
    position: relative;
    /* overflow: hidden; */
    margin: 0.5rem 0 1rem 0;
    background-color: #fff;
    transition: box-shadow .25s;
    border-radius: 2px; 
}

图像未加载铬

1 个答案: