#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"))