Блог

Главная - Вопросы по программированию - Горизонтальный макет со столбцами: как автоматически настроить размер контейнера с фиксированным размером столбца и неизвестным количеством столбцов

Горизонтальный макет со столбцами: как автоматически настроить размер контейнера с фиксированным размером столбца и неизвестным количеством столбцов

#css #height #overflow #multiple-columns #horizontal-scrolling

#css #высота #переполнение #несколько столбцов #горизонтальная прокрутка

Вопрос:

Я хотел бы создать страницу с горизонтальным макетом. Страница состоит из трех блоков: реферата, довольно длинной статьи, организованной по столбцам, и блока библиографических ссылок.

Блоки должны быть организованы только по горизонтали (без вертикальной прокрутки). Я хотел бы получить горизонтальную прокрутку для всех блоков (без фиксированных блоков или только одного блока с прокруткой).

Моя проблема в том, что при использовании фиксированной высоты и неопределенного количества столбцов я получаю только два столбца, а остальные переполняются в последнем div

Как убедиться, что размер центрального div со столбцом правильный?

Вот скриншот проблемы: желтый div имеет размер первых столбцов. Остальное содержимое переполняется до последнего div, который обычно должен быть в конце.

Содержимое раздела статьи сводится к следующему: https://i.stack.imgur.com/o0Api.png

И вот лучшее, что мне удалось сделать до сих пор (я использую js только для генерации случайного содержимого) :

Моя страница примера :

 <html>

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.18/chance.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> 
    <link rel="stylesheet" href="test.css">
</head>

<body>

    <div id="paper" row text-center>
        <div id="info">
            <h2>Abstract</h2>
            <p id="abstract"></p>
        </div>
        <div id="content">
        </div>
        <div id="more">
            <h2>More</h2>
        </div>
    </div>

    <script>
        function getRandomInt(max) {
            return Math.floor(Math.random() * Math.floor(max));
        }

        $("#abstract").append(chance.paragraph({
            sentences: 7
        }));

        $("#content").append("<h1>"   chance.paragraph({
            sentences: 1
        })   "</h1>");
        $("#content").append("<h2>"   chance.paragraph({
            sentences: 1
        })   "</h2>");

        for (var i = 0; i < 90; i  ) {
            if (Math.random() > 0.8) {
                $("#content").append("<h2>"   chance.paragraph({
                    sentences: 1
                })   "</h2>");
            }
            $("#content").append("<p>"   chance.paragraph({
                sentences: getRandomInt(10)
            })   "</p>");
        }

        $("#more").append(chance.paragraph({
            sentences: 7
        }));
    </script>
</body>
</html>

И CSS :

 #paper{
    display: flex;
    flex-direction: row;
    background : white;
    overflow-x : scroll;
}

#paper > div{
    height : 96vh;
}

#info{
    background : yellowgreen;
}
#content{
    columns: 300px ;
    column-gap: 100px;
    background : yellow;
}
#more{
    background : pink;
}

]

Это для личного использования. Мне не нужно поддерживать старые версии браузера. Подойдут последние версии Firefox и Chrome или использование js.

Решение 1: я нашел решение, которое работает с javascript: я не уверен, что это очень элегантно, хотя. Я подозреваю, что должно быть более приемлемое решение. Любые комментарии будут приветствоваться.

  $('#content').css("min-width",(document.getElementById('content').scrollWidth   "px"))
Метки: