我有一個空div，並使用javascript創建其他div。我已經建立了我的CSS，因此它會創建一個網格。我的問題是：我如何動態調整div的大小，使它們均勻地填充它們的容器？在容器的整個高度和寬度上均勻分佈DIV兒童

我試圖用繪圖更好地說明它，但我的繪圖技巧並不好。希望你會明白我想要的。

黑方塊是父DIV和紅色方塊是孩子。當我創建一個div時，它應該填充父div（有一點餘量）。

有了兩個div，它會將父母分成兩半。

對於3，它的行爲將類似於您在圖像的右上角看到的，其他人則如此。

我怎麼能用CSS來完成這項工作？

一些更多的信息：

這是我必須爲學校做的遊戲。這是以前的版本，但你有一個div的方塊的想法。接下來的任務是讓用戶選擇他們想玩的方格數。但這必須是動態的，他們必須能夠選擇像5或8這樣的數字。不僅僅是4,9,16,25等，這太容易了。

https://luukwuijster.io/school/csp/kleurenspel/

來源

2017-02-13 Luuk Wuijster

我沒有在這裏看到一個統一的模式。我看到了大多數這樣的獨特佈局。從1到2很容易，但到3 ...你怎麼知道，如果有3，第一個應該是100％的寬度，最後2個是50％？爲什麼3不是33％的寬度？有某種一致的模式嗎？ –

當然，我可以使用百分比，但我不知道用戶需要多少個正方形。所以，我不能在這種情況下使用它 –

這是我必須爲學校製作的遊戲。這是以前的版本，但你會得到div中有正方形的想法。接下來的任務是讓用戶選擇他們想玩的方格數。但這必須是動態的，必須能夠選擇像5或8這樣的數字。不僅僅是4,9,16,25等，這太容易了。 https://luukwuijster.io/school/csp/kleurenspel/ –

這種類型的佈局可使用CSS Flexbox的來實現。

首先通過添加display:flex將包裝元素轉換爲柔性盒。接下來，將flex:1 1 auto添加到您的箱子，以允許它們根據需要增長和縮小以填充空間。

爲了防止您的箱子被flexbox壓扁成一條線，請在其上設置一個min-width值。我已使用min-width:30%，但可以更改此編號以適合您的需求。 30％將意味着在任何時候連續的盒子的最大數量是3（因爲它僅低於容器寬度的1/3或33％）。

嘗試添加或刪除下面示例代碼中的框。

#wrapper { 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    width:400px; 
 
    height:400px; 
 
} 
 

 
.box { 
 
    background-color:white; 
 
    border:1px solid black; 
 
    min-width:30%; 
 
    flex:1 1 auto; 
 
    }

<div id='wrapper'> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
    <div class='box'></div> 
 
</div>

來源

2017-02-14 09:28:39

嗯。對了謝謝。這正是我一直在尋找的！ –

在容器的整個高度和寬度上均勻分佈DIV兒童

一些更多的信息：

回答

相關問題