HTML图像不适合空白

Question

我有问题的形象不适合我的容器。顺便说一句:每个人只需执行另一个div类=“profile-图片”。我还注意到，不加注释的float:left将使图像适合并减少图像之间的空间，但我不想使用它，除非它是唯一的方法。我不是网页设计方面的专家，但我认为这会工作，因为容器宽度为1200 5px，profile图片div为390 5px，边距为5 5px，因此总共为400 5px。400 px3=1200 in，所以第2行的第1行应该在第1行，对吗？

HTML

<div class="container">
    <div class="profile-picture"
         th:each="i: ${#numbers.sequence(0, user.pictures.size() - 1)}">
        <img th:src="@{'/user/' + ${user.id} + '/image/' + ${i}}">
    </div>
</div>

CSS

/*profile*/

* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

.container {
    max-width: 1200px;
    margin: auto;
    background: #f2f2f2;
    overflow: auto;
}

.profile-picture {
    margin: 5px;
    /*border: 1px solid #ccc;*/
    /*float: left;*/
    width: 390px;
    display: inline-block;
}

.profile-picture img {
    width: 100%;
    height: 267px;
}

​

​

Answer 1

当您将内联块元素放在一起时，浏览器将假设您需要在元素之间留出一点空白。这是内联元素的正常行为。如果您浮动它们，元素将不会遵循这种正常行为，因为您将它们从正常流中提取出来。