Question

我已经阅读了有关此问题的所有stackoverflow帖子，但所有帖子中都有固定数量的列或div（除非我错过了它）。

我正在设计一个在线商店。每种产品都在产品瓷砖上展示。每个产品瓷砖浮动（左）。在浏览器窗口最宽的位置，每行有三个产品图块。将浏览器的大小调整为680px时，每行只有两个产品图块，每行只有一个400px。

如果一个磁贴包含占用两行的产品名称，则会增加产品磁贴的高度。因此，它下面的瓷砖不会漂浮。它们会卡在上方较高产品瓷砖的右下角。

我写了一些javascript / jquery来检查最高的瓷砖，然后将所有瓷砖设置为相同的高度。这在load（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()方法时，元素的高度将被修复且无法更改，因为相同方法的所有后续触发将只读取设置高度。

您想要的是允许浏览器在尝试检索新浏览器计算的outerHeight之前，通过设置height: auto来重新计算每个产品图块的高度：

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网格系统，以便在缩放时更改布局。

    <button id='yes' class='btn btn-primary'>Yes</button>
    <button id='no' class='btn btn-default'>No</button>

在HTML中：

.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);
  }
}

网格会自动将每一行的大小调整为与其最高的框相同的高度，并且列也会自动调整大小。查看this fiddle以查看互动演示。

使用javascript

2 个答案: