使用javascript將div設置爲相同高度

Question

我已閱讀所有關於此問題的stackoverflow帖子，但所有的寬度中都有固定數量的列或div（除非我錯過了它）。

我在設計一家網上商店。每個產品都呈現在產品瓷磚上。每個產品瓷磚浮動（左側）。在瀏覽器窗口最寬處，每行有三個產品拼貼。將瀏覽器大小調整爲680px時，每行只有兩個產品拼貼，而每行只有一個400px。

如果一個圖塊包含佔用兩行的產品名稱，則會增加產品圖塊的高度。因此，它下面的瓷磚不會漂浮。他們會卡在上面的較高產品瓷磚的右下角。

我寫了一些javascript/jquery來檢查最高瓷磚，然後將所有瓷磚設置爲相同的高度。這適用於加載（eventlistener），但由於某種原因而不是調整大小。

有人可以解釋爲什麼這個功能不能調整大小？如果有人知道一種方法，只將所有產品拼塊設置爲與該行中的最高產品拼塊相同的高度，而將所有產品拼塊設置爲最高產品拼塊，那將真正成爲我的一天。 （不要忘記一排瓷磚的數量取決於窗口寬度）

這是產品圖塊的html。

<div class="productTile"> 
    <!-- stuff goes here --> 
</div> 

這是產品圖塊的CSS。

.productTile 
    { 
    background:grey; 
    width:33%; 
    float:left; 
    } 

@media only screen and (max-width:680px) 
    { 
    .productTile 
     { 
     width:50%; 
     } 
    } 

@media only screen and (max-width:400px) 
    { 
    .productTile 
     { 
     width:100%; 
     } 
    } 

這是jQuery的

function setProdTiles() 
    { 
    var prodTileH = 0; // set variable to catch largest height 
    $(".productTile").each(function(){ 
     H = $(this).outerHeight(); // height current productTile 
     if (H > prodTileH) // get highest 
      { 
      prodTileH = H; 
      } 
    }); 
    $(".productTile").outerHeight(prodTileH); 
    } 

window.addEventListener("load", setProdTiles); 
window.addEventListener("resize", setProdTiles); 

預先感謝您。

Answer 1

問題的癥結在於事實上，在您事先設定明確身高之後，您正試圖重新計算您的元素的外部高度。這意味着您的第一次執行setProdTiles()方法時，元素的高度將被固定並且不能被更改，因爲隨後所有相同方法的觸發將只讀取設置的高度。

你想要的是讓瀏覽器重新計算每個產品牌的高度，通過設置height: auto，試圖獲取新的瀏覽器計算outerHeight前：

function setProdTiles() { 
    var prodTileH = 0; 
    $(".productTile") 
.css('height', 'auto')  // set height to auto, allow browser to relayout 
.each(function() {   // iterate through all tiles 
    H = $(this).outerHeight(); // height current productTile 
    if (H > prodTileH)   // get highest 
    { 
     prodTileH = H; 
    } 
    }); 
    $(".productTile").outerHeight(prodTileH); 
} 

Answer 2

我建議你使用CSS網格帶有媒體查詢的系統在您縮放時更改佈局。

.container { 
    max-width: 800px; 
    margin: 0 auto; 
    display: grid; 
    grid-auto-rows: 1fr; 
    grid-column-gap: 30px; 
    grid-row-gap: 30px; 
    grid-template-rows: auto; 
} 

@media (max-width:400px) { 
    .container { 
    grid-template-columns: repeat(1, 1fr); 
    } 
} 
@media (max-width:680px) and (min-width:401px) { 
    .container { 
    grid-template-columns: repeat(2, 1fr); 
    } 
} 
@media (min-width:681px) { 
    .container { 
    grid-template-columns: repeat(3, 1fr); 
    } 
} 

而在HTML：

<div class="container"> 
    <div class="col"> 
    Sample Content 
    </div> 
    <div class="col"> 
    Sample content<br>two lines 
    </div> 
    <!-- As many other divs as you need--> 
</div> 

該網格將自動調整每行相同的高度，它的最高的框，列也將自動調整。查看this fiddle查看互動演示。