我正在創建一個回應式影像網格。每行有兩個影像——一個矩形，一個正方形——每一行的布局是相反的（square rectangle-> rectangle square，依此類推）。
目前，我正在使用height: 0; padding-bottom: 100%使我的方形 div 保持其比例，而矩形 div 獲得height: 100%; padding-bottom: 0;. 它完全可以正常作業，直到圖庫中的最后一個影像在其自己的行上是一個矩形 div。將height: 100%;不再有任何的高度與作業，所以它根本沒有高度結束。
我在這個 CodePen 中重新創建了我的問題：https ://codepen.io/Dalen_K/pen/GRvdEjp
我怎樣才能確保最后一個 div 保持與它旁邊有一個正方形的高度相同（最好沒有 JS）？網格會比 flexbox 更好地作業嗎？如果是這樣，我將如何去做？
提前致謝！
uj5u.com熱心網友回復：
使用.image-large它，它將被修復：
&.image-large {
height: 0;
padding-bottom: calc(50% - 12px);
}
原因是列高是根據內容高度或同一行中最高列的大小決定的。（我的意思是列所在的可見行，而不是row標簽）。由于您的col-4列具有高度的內容（由填充提供），因此另一列會自動變得與它相同。然而，在最后一行中，該列沒有要繼承的參考高度，這就是為什么其中的影像不能超過 50px 的高度設定為最小值。我所做的是給大列中的影像一個高度，就像你給小影像的高度一樣。（額外的 12 像素是因為列之間有 24 像素的間隙，這就是我減去它的原因）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/353059.html