Несколько столбцов - заполнение левого столбца первым - PullRequest
Новая
       7

Несколько столбцов - заполнение левого столбца первым

0 голосов
/ 16 февраля 2019

У меня есть многостолбцовый экран, отображающий кучу блоков div с использованием CSS.Я пытаюсь выяснить, есть ли способ сначала заполнить левый столбец, а затем перейти к следующим столбцам.

Вы увидите, что он настроен на отображение 1, 2 или 3 столбцов в зависимости отширина экрана, поэтому я никогда не хочу иметь горизонтальные полосы прокрутки.Если у вас небольшой дисплей, отображается только один или два столбца, и правильно отображается вертикальная полоса прокрутки.Если развернуть экран до максимума, появятся 3 столбца, но CSS «распределяет» поля по столбцам вместо заполнения первого столбца.

Надеюсь, это имеет смысл.Любая помощь будет оценена! 

<style>
    .Comment {
        width: 320px;
        height: calc(100vh - 40px);
        background-color: burlywood;
    }

    .CommentBodySurround {
        height: calc(100% - 40px);
        overflow: auto;
    }

    .CommentBody {
    }

    @media screen and (min-width:700px) {
        .Comment {
            width: 650px;
        }

        .CommentBodySurround {
            height: calc(100% - 40px);
        }

        .CommentBody {
            column-count: 2;
            width: 630px;
        }
    }

    @media screen and (min-width:1020px) {
        .Comment {
            width: 960px;
        }

        .CommentBodySurround {
            height: calc(100% - 40px);
        }

        .CommentBody {
            column-count: 3;
            width: 940px;
        }
    }

    .box {
        width: 290px;
        margin: 3px;
        border: 3px solid #345787;
        border-radius: 12px;
        display: inline-flex;
        background-color: #F1F1F2;
        height: 100px;
    }
</style>
<div class="Comment">
    <div style="height:30px; background-color:aquamarine">this is the top</div>
    <div class="CommentBodySurround">
        <div class="CommentBody">
            <div class="box">
                1
            </div>
            <div class="box">
                2
            </div>
            <div class="box">
                3
            </div>
            <div class="box">
                4
            </div>
            <div class="box">
                5
            </div>
            <div class="box">
                6
            </div>
            <div class="box">
                7
            </div>
            <div class="box">
                8
            </div>
            <div class="box">
                9
            </div>
            <div class="box">
                10
            </div>

            

        </div>
    </div>
</div>

Как я хочу, чтобы это выглядело

Мне не нужна горизонтальная полоса прокрутки, еслиэкран заполнен, хочу прокрутить вертикально

1 Ответ

0 голосов
/ 16 февраля 2019

Установите height: 100% и column-fill: auto на .CommentBody

.CommentBody {
  column-count: 2;
  column-fill: auto;
  width: 630px;
  height: 100%;
}

column-fill: auto, чтобы заполнить каждый столбец перед переходом к следующему https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill

Youнужно установить высоту на 100%, чтобы он знал, когда он на самом деле завершен.

...