首页猿问我可以创建一个多列 CSS...

我可以创建一个多列 CSS 页面，根据页面和列大小包装单词吗？

JavaScript

缥缈止盈 2022-10-13 10:46:43

我正在尝试在 CSS 中创建一个看起来像旧报纸的页面。我的页面应该是响应式的，并且在小型设备上只有一列文本，但这与我寻求帮助的问题几乎无关。在较大的屏幕上，页面应该有 2 列或 3 列，具体取决于屏幕宽度。我可以使用 CSS 列来实现这一点……但是，我想通过让 CSS 列每页换行（定义为 100vh）来使事情变得更加复杂。我的标准是：文本内容必须由多个可变段落标签组成文本内容必须每页分成三列页面必须相对于设备屏幕 (100vh)文本必须从左到右阅读，但每列从上到下排列，就像报纸一样这可以通过 CSS Grid 还是其他方式实现？这是一些示例 HTML：<main class="page-content"><h1 id="my-article-title">My article title</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></main>

查看完整描述

1 回答

慕妹3146593

TA贡献1820条经验获得超9个赞

在你的情况下，最稳定的事情是column-fill: balance;因为它适用于任何高度块，没有 100% 的高度，不幸的是。因为你只能使用column-fill: auto严格的高度。这看起来不错，直到孩子的身高大于父母的身高。

这是我正在谈论的演示（全屏以获得更好的体验）

* {

box-sizing: border-box;

}

html {

height: 100%;

}

body {

width: 100%;

min-height: 100vh;

min-height: calc(var(--vh, 1vh) * 100);

margin: 0;

padding: 0;

position: relative;

}

.page-content {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

overflow: hidden;

column-count: 3;

column-fill: auto;

padding: 10px;

}

<h1 id="my-article-title">My article title</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</main>

这是一个幻想使用flex。仅用于演示（全屏以获得更好的体验）

* {

box-sizing: border-box;

}

html {

height: 100%;

}

body {

width: 100%;

min-height: 100vh;

min-height: calc(var(--vh, 1vh) * 100);

margin: 0;

padding: 0;

position: relative;

}

.page-content {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

overflow: hidden;

padding: 0;

display: flex;

flex-direction: column;

flex-wrap: wrap;

justify-content: flex-start;

align-content: flex-start;

align-items: flex-start;

}

.page-content>* {

flex: 0 1 auto;

width: 33.33%;

padding: 10px;

margin: 0;

}

<h1 id="my-article-title">My article title</h1>

</main>

正确的答案是使用纯 JavaScript。完美运行，即使我在写它时也没想到。打开全屏并尝试更改视口的高度和宽度。笔记！所有直系子女都必须用标签覆盖。没有简单的文本直接在.page-content.

setDimensions(); // triggers function on page load

window.addEventListener('resize', () => {

setDimensions(); // triggers function on any resize

});

function setDimensions() {

let columns = 1;

if (window.innerWidth > 1140) {

columns = 3; // set 3 cols if screen > 1140px, changeable

} else if (window.innerWidth > 767) {

columns = 2; // set 2 cols if screen > 767px, changeable

}

let childHeight = 0;

let totalHeight = 0;

let pageContent = document.querySelector('.page-content');

pageContent.style.cssText = ""; // rest style for second+ execution of the function

let pageContentChildren = document.querySelectorAll('.page-content > *');

// now we start to geather the height of all direct children

for (let i = 0; i < pageContentChildren.length; i += 1) {

// each time we corrects the width of a child according to columns number, for correct height determination

pageContentChildren[i].style.cssText = "width: " + (100 / columns) + "%;";

childHeight = pageContentChildren[i].offsetHeight;

totalHeight += childHeight; //adding current child height to total

pageContentChildren[i].style.cssText = ""; //reset child width

}

if ((totalHeight / columns + 80) > window.innerHeight) {

// if the total height of children if bigger then the block height

pageContent.style.cssText = "column-count: " + columns + "; column-fill: balance;";

} else {

pageContent.style.cssText = "column-count: " + columns + "; column-fill: auto; height: 100%;";

}

* {

box-sizing: border-box;

}

html {

height: 100%;

}

body {

width: 100%;

min-height: 100vh;

margin: 0;

padding: 0;

position: relative;

}

.page-content {

position: absolute;

left: 0;

top: 0;

width: 100%;

min-height: 100%;

overflow-x: hidden;

padding: 0;

}

.page-content>* {

padding: 0 5px;

}

<h1 id="my-article-title">My article title</h1>

</main>

更新

好吧，现在我明白了，你想要实现什么。这里有一个想法：让我们数一数孩子的身高。只要孩子的总和高度 > 然后窗口高度 - 创建一个新元素并将下一组孩子放在那里，直到他们的总高度 > 窗口高度等等......这是一个 codepen，在大屏幕上观看。目前它仅适用于加载（尚未完成调整大小，因为现在不要，如果此解决方案适合您）https://codepen.io/focus-style/full/OJMpKyV

虽然找到了一个有趣的纯文本解决方案。将文本拆分为页面并单独呈现 (HTML5)

反对回复 2022-10-13

1 回答
0 关注
114 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

我可以创建一个多列 CSS 页面，根据页面和列大小包装单词吗？

我可以创建一个多列 CSS 页面，根据页面和列大小包装单词吗？

1 回答

添加回答