使用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查看互动演示。