Почему изображения переполняются inline-block? - PullRequest
Новая
       38

Почему изображения переполняются inline-block?

0 голосов
/ 11 апреля 2020

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;
}

В браузере я вижу два столбца изображений, но ширина содержимого карты заканчивается там, где Первый столбец заканчивается. Что вызывает это и как я могу решить это? Вот как это выглядит сейчас: enter image description here

1 Ответ

0 голосов
/ 11 апреля 2020

Потому что у вас есть дубликат для 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;, и она должна нормально работать. Вот копия jsfiddle проблемы с приложенным решением

Вот скриншот с проверенным вашим элементом: enter image description here

Еще одна вещь, которую вы должны удалить, если вы не хотите, чтобы пространство вокруг столбцов было align-items: center; внутри класса .card-content.

Откройте обновленную скрипку, чтобы увидеть изменения.

...