Question

我想基于此行为在我的页面中显示一些div： enter image description here

根据div的数量，它们将占用页面的大小，直到有8个，然后在9+以上，它们将保持其大小，页面将变为可滚动。

我考虑使用像this这样的flexbox，但无法达到预期的行为。

所以我开始用JS编写一个名为＆＃34;一个＆＃34;如果有一个元素，＆＃34;两个＆＃34;对于两个元素等然后用这个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个。

它运作正常，但欢迎任何更好的想法，更简洁，

Answer 1

由于以下原因，div从底部填充：

display: table

<body> {li>
display: table-cell和vertical-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%;
}

根据数字填充带有矩形的页面

1 个答案: