gpt4 book ai didi

javascript - 根据数量用矩形填充页面

转载 作者:可可西里 更新时间:2023-11-01 14:48:14 25 4
gpt4 key购买 nike

我想根据这种行为在我的页面中显示一些 div: enter image description here

根据 div 的数量,它们将占据页面的大小,直到有 8 个,然后在 9+ 时它们将保持其大小并且页面将变得可滚动。

我考虑过使用类似 this 的 flexboxes但无法完全实现预期的行为。

所以我开始用 JS 放置一个类,如果有一个元素,则称为“一个”,如果有一个元素,则为“两个”,等等。然后使用这个 css(LESS):

.container.one {
div:nth-child(1) {
width: 100%;
height: 100%;
}
}
.container.two {
div:nth-child(1) {
width: 100%;
height: 75%;
}
div:nth-child(2) {
width: 100%;
height: 25%;
}
}

等最多 8 个。

它工作正常,但欢迎任何更好、更简洁的想法

最佳答案

div 从底部填充感谢:

  • display: table<body>

  • display: table-cellvertical-align: bottom<div class="wrap">

通过添加和删除 div 进行测试。

div:last-child:nth-child(odd)是将最后一个奇数 div 100% 传播的神奇酱料。

Have an example!

HTML

<div class="wrap">
<div><div>
<-- ... -->
</div>

CSS

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body {
height: 100%;
}
body {
display: table;
width: 100%;
}
.wrap {
display: table-cell;
vertical-align: bottom;
width: 100%;
height: 100%;
}
.wrap div {
border: solid 1px #CCC;
float: left;
width: 50%;
height: 25%;
}
.wrap div:last-child:nth-child(odd) {
width: 100%;
}

关于javascript - 根据数量用矩形填充页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25444617/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com