自舉重定位div基於其他div的可見性

Question

我正在嘗試根據其他divs的可見性重新定位div 。 當屏幕尺寸減小時，它們會堆疊起來並自動隱藏/顯示任何div，從而使堆疊起來的divs能夠顯示/隱藏而沒有任何空白區域，但不是正常的屏幕尺寸（筆記本電腦/桌面）。

看看這個jsbin

現在，取消選中任何復選框。 如果一行僅顯示一個div，那么我要調整其大小，使其也占用隱藏的div。

我在頁面中將col-md-6類用於2x2 div。

<div class="col-md-6 column" id="1col"> </div>

Answer 1

嘗試以下操作：首先，將一個類名添加到您的.row類中，這樣您就不會在其他地方影響它，然后使用以下CSS

.row{display:flex; justify-content:space-around}
.column{display:inline-flex; height:100%; width:auto;}

當然，你會替換.row與（比如說） .row.myColumns ，但在此同時，你可以只使用這個代碼在你jsbin測試。 我那里沒有帳戶，也不打算注冊進行測試，因此無法進行分叉，但是我使用2、3處理了您的代碼，然后將所有四列移動到同一行中，效果很好，所以請自己嘗試。