不同长度单词的动态列数
Dynamic number of columns for words with different length
所以我尝试创建一个包含多个 li 条目的 ul。
li 中的这些单词条目应该显示在列中,但是我希望这些列是动态的,
这意味着较长的单词会创建较少的列,而较短的单词会创建更多的列。
该页面应该以 DINA4 格式显示。
我已经尝试使用 Flexbox & Grid,但是只有当我定义了固定数量的列时才有效,因此它不是动态的。
如果可能的话,我想避免使用 javaScript,因为页面应该由 CS 和单独的 HTML 组成。
Short words with more columns
Longs words with fewer columns
使用网格自动填充我得到以下结果:
Result with long words
我的代码:
ul.words-o {
margin-top: 0;
margin-bottom: 1em;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0 20px;
}
您可以使用 javascript 通过自定义 CSS var(--);
更新 minmax 值
var bigW = "0";
// go through all children and keep the widest value
for (let e of document.querySelectorAll("ol > li")) {
elW = e.offsetWidth;
if (elW < 5) {} else if (elW > bigW) {
bigW = elW
}
// upddate the CSS var()
document.documentElement.style.setProperty("--min-content", bigW + 1 + "px");
// delay time to display as a grid untill every children's width have been tested
setTimeout(document.querySelector("ol#ol-grid").classList.add("grid"), 10);// if your computer is slow, increase it a bit , if your eye notices it, its too long
}
* {
margin: 0;
padding: 0;
}
.grid {
display: grid;
}
ol {
grid-template-columns: repeat(
auto-fit,
minmax(var(--min-content,200px), max-content)
);
gap: 20px;
}
li {
display: inline-block;
border: solid;
}
<ol id="ol-grid">
<li>lkgdsflkdgsh</li>
<li>klfqh</li>
<li>Lorem</li>
<li> ipsum</li>
<li> dolor</li>
<li> sit</li>
<li> amet</li>
<li>consectetuer</li>
<li> adipiscing</li>
<li> elit.</li>
<li>Aliquam</li>
<li> tincidunt</li>
<li> mauris</li>
<li> eu</li>
<li> risus.</li>
<li>VestibulumVestibulum</li>
<li> auctor</li>
<li> dapibus</li>
<li> neque</li>
</ol>
此外,
您可以使用 column-count
和 javascript 将值重新分配给 column-count
onload
和 onresize
例子
function checkGridWidth() {
let colCount = 12; // set col numbers to start with
document.documentElement.style.setProperty('--colCount', colCount); // reset while on resize needs it
let list = document.querySelector("#ol-grid");
let vw = list.parentNode.offsetWidth;
let myW = list.offsetWidth;
if (myW > vw) {
let dif = myW - vw;
let colW = (myW / colCount);
let newColCount = vw / colW;
document.documentElement.style.setProperty('--colCount', Math.floor(newColCount - 1));
}
}
window.onresize = checkGridWidth;
window.onload = checkGridWidth;
* {
margin: 0;
padding: 0;
}
div {
margin: 3cm;
}
@media print {
div>h1 {
display: none;
}
}
ol {
padding: 5px;
column-gap: 5px;
column-fill: balance;
column-count: var(--colCount, 12);
min-width: max-content;
/* you need it so it can overflow its parent, js will use this width value*/
margin: auto;
border: solid;
/*see me*/
}
li {
display: block;
border: solid;
/*see me*/
}
li:not(:last-of-type) {
margin-bottom: 5px;
}
<div>
<h1> Redraw the right amount of column than can fit in here if too wide</h1>
<ol id="ol-grid">
<li>lkgdsflkdgsh</li>
<li>klfqh</li>
<li>Lorem</li>
<li> ipsum</li>
<li> dolor</li>
<li> sit</li>
<li> amet</li>
<li>consectetuer</li>
<li> adipiscing</li>
<li> elit.</li>
<li>Aliquam</li>
<li> tincidunt</li>
<li> mauris</li>
<li> eu</li>
<li> risus.</li>
<li>VestibulumVestibulum</li>
<li> auctor</li>
<li> dapibus</li>
<li> neque</li>
<li>lkgdsflkdgsh</li>
<li>klfqh</li>
<li>Lorem</li>
<li> ipsum</li>
<li> dolor</li>
<li> sit</li>
<li> amet</li>
<li>consectetuer</li>
<li> adipiscing</li>
<li> elit.</li>
<li>Aliquam</li>
<li> tincidunt</li>
<li> mauris</li>
<li> eu</li>
<li> risus.</li>
<li>VestibulumVestibulum</li>
<li> auctor</li>
<li> dapibus</li>
<li> neque</li>
</ol>
</div>
所以我尝试创建一个包含多个 li 条目的 ul。 li 中的这些单词条目应该显示在列中,但是我希望这些列是动态的, 这意味着较长的单词会创建较少的列,而较短的单词会创建更多的列。 该页面应该以 DINA4 格式显示。 我已经尝试使用 Flexbox & Grid,但是只有当我定义了固定数量的列时才有效,因此它不是动态的。
如果可能的话,我想避免使用 javaScript,因为页面应该由 CS 和单独的 HTML 组成。 Short words with more columns Longs words with fewer columns
使用网格自动填充我得到以下结果: Result with long words
我的代码:
ul.words-o {
margin-top: 0;
margin-bottom: 1em;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 0 20px;
}
您可以使用 javascript 通过自定义 CSS var(--);
更新 minmax 值var bigW = "0";
// go through all children and keep the widest value
for (let e of document.querySelectorAll("ol > li")) {
elW = e.offsetWidth;
if (elW < 5) {} else if (elW > bigW) {
bigW = elW
}
// upddate the CSS var()
document.documentElement.style.setProperty("--min-content", bigW + 1 + "px");
// delay time to display as a grid untill every children's width have been tested
setTimeout(document.querySelector("ol#ol-grid").classList.add("grid"), 10);// if your computer is slow, increase it a bit , if your eye notices it, its too long
}
* {
margin: 0;
padding: 0;
}
.grid {
display: grid;
}
ol {
grid-template-columns: repeat(
auto-fit,
minmax(var(--min-content,200px), max-content)
);
gap: 20px;
}
li {
display: inline-block;
border: solid;
}
<ol id="ol-grid">
<li>lkgdsflkdgsh</li>
<li>klfqh</li>
<li>Lorem</li>
<li> ipsum</li>
<li> dolor</li>
<li> sit</li>
<li> amet</li>
<li>consectetuer</li>
<li> adipiscing</li>
<li> elit.</li>
<li>Aliquam</li>
<li> tincidunt</li>
<li> mauris</li>
<li> eu</li>
<li> risus.</li>
<li>VestibulumVestibulum</li>
<li> auctor</li>
<li> dapibus</li>
<li> neque</li>
</ol>
此外,
您可以使用 column-count
和 javascript 将值重新分配给 column-count
onload
和 onresize
例子
function checkGridWidth() {
let colCount = 12; // set col numbers to start with
document.documentElement.style.setProperty('--colCount', colCount); // reset while on resize needs it
let list = document.querySelector("#ol-grid");
let vw = list.parentNode.offsetWidth;
let myW = list.offsetWidth;
if (myW > vw) {
let dif = myW - vw;
let colW = (myW / colCount);
let newColCount = vw / colW;
document.documentElement.style.setProperty('--colCount', Math.floor(newColCount - 1));
}
}
window.onresize = checkGridWidth;
window.onload = checkGridWidth;
* {
margin: 0;
padding: 0;
}
div {
margin: 3cm;
}
@media print {
div>h1 {
display: none;
}
}
ol {
padding: 5px;
column-gap: 5px;
column-fill: balance;
column-count: var(--colCount, 12);
min-width: max-content;
/* you need it so it can overflow its parent, js will use this width value*/
margin: auto;
border: solid;
/*see me*/
}
li {
display: block;
border: solid;
/*see me*/
}
li:not(:last-of-type) {
margin-bottom: 5px;
}
<div>
<h1> Redraw the right amount of column than can fit in here if too wide</h1>
<ol id="ol-grid">
<li>lkgdsflkdgsh</li>
<li>klfqh</li>
<li>Lorem</li>
<li> ipsum</li>
<li> dolor</li>
<li> sit</li>
<li> amet</li>
<li>consectetuer</li>
<li> adipiscing</li>
<li> elit.</li>
<li>Aliquam</li>
<li> tincidunt</li>
<li> mauris</li>
<li> eu</li>
<li> risus.</li>
<li>VestibulumVestibulum</li>
<li> auctor</li>
<li> dapibus</li>
<li> neque</li>
<li>lkgdsflkdgsh</li>
<li>klfqh</li>
<li>Lorem</li>
<li> ipsum</li>
<li> dolor</li>
<li> sit</li>
<li> amet</li>
<li>consectetuer</li>
<li> adipiscing</li>
<li> elit.</li>
<li>Aliquam</li>
<li> tincidunt</li>
<li> mauris</li>
<li> eu</li>
<li> risus.</li>
<li>VestibulumVestibulum</li>
<li> auctor</li>
<li> dapibus</li>
<li> neque</li>
</ol>
</div>