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

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

2 голосов
/ 13 апреля 2019

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

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

Моя проблема в том, что при использовании фиксированной высоты и неопределенного числа столбцов я получаю только два столбца ипереполнение остатка на последнем 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"))
...