为什么图像会溢出内联块？

Question

HTML：

<div id="content">
    <div class="card">
        <span class="card-title">Album</span>
        <div class="card-content">
            <img class="album-thumbnail" src="a.jpg">
            <img class="album-thumbnail" src="b.jpg">
            <img class="album-thumbnail" src="c.jpg">
            <img class="album-thumbnail" src="d.jpg">
        </div>
    </div>
</div>

CSS：

.card {
    background-color: white;
    margin: 0 2em 2em 0;
    display: inline-flex;
    flex-direction: column;
    padding: 1.5em;
    border: 1px solid black;
}

.card-content {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: flex-start;
    max-height: 300px;
}

.album-thumbnail {
    width: 150px;
    margin: 1px;
}

在浏览器中，我可以看到两列图像，但卡片内容的宽度在第一列结束处结束。是什么原因造成的，我该如何解决？ 这是它目前的样子：

Answer 1

因为您在此代码部分中有 display 的重复项：

.card {
    background-color: white;
    margin: 0 2em 2em 0;
    display: flex;
    flex-direction: column;
    padding: 1.5em;
    border: 1px solid black;

    display: inline-block;
}

删除此行display: inline-block;，它应该可以正常工作。这是applied solution问题的副本jsfiddle

这是检查了您的元素的屏幕截图：

如果您不希望列周围有空格，您应该删除的另一件事是 align-items: center; 在类 .card-content 中。

打开更新的小提琴以查看更改。