根據數字填充帶有矩形的頁面

Question

我想根據這種行為在我的頁面中顯示一些div： 在此輸入圖像描述

根據div的數量，它們將占用頁面的大小，直到有8個，然后在9+以上，它們將保持其大小，頁面將變為可滾動。

我想過使用像這樣的 flexbox，卻無法達到預期的行為。

因此，如果有一個元素，我開始使用JS稱為“one”的類，對於兩個元素等，然后使用此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> display: table
display: table-cell和vertical-align: bottom on <div class="wrap">

通過添加和刪除div進行測試。

div:last-child:nth-child(odd)是將最后一個奇數div傳播100％的神奇醬油。

有一個例子！

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 個解決方案

解決方案1
1 已采納 2014-08-22 10:35:57

根據數字填充帶有矩形的頁面

問題描述

1 個解決方案

解決方案1 1 已采納 2014-08-22 10:35:57

解決方案1
1 已采納 2014-08-22 10:35:57