大屏幕上的网格显示间隙

Question

我正在使用 Materialise 网格，但出于某种原因，当我的网格在大屏幕上显示时出现间隙。我在使用 Bootstrap 和 Materialize 并意识到同时使用两者是个坏主意，所以我删除了 Bootstrap 网格并在 Materialize 网格中重新创建它。

但是我不确定这是否与切换到 Materialise 网格有关，因为我在 Bootstrap 网格上遇到了同样的问题。我可能在我的页眉和页脚中弄乱了脚本标签和 link 标签，所以可能搞砸了。

请查看下面的屏幕截图和我的 HTML、CSS、页眉、页脚代码。

#store {
  padding: 2%;
  background-color: #c8def7;
}

.item-name {
  margin-top: 4%;
  font-size: 1.4rem;
  text-align: left;
}

.item-add {
  margin: auto;
  padding: 10px;
  margin-top: 10px;
  display: block;
  width: 100%;
  background-color: #a8323a;
  font-family: 'Open Sans', sans-serif;
}

.item {
  margin-top: 4%;
  font-family: 'Baloo Tammudu 2', cursive;
  padding: 15px;
  border-radius: 15px;
}

.price {
  color: red;
  text-align: center;
  float: right;
  font-size: 1.4rem;
}

.item-details {
  margin-top: 4%;
  text-align: center;
}

.item-pic {
  width: 100%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="/css/styles.css">

  <!-- Materialize -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  <script type="text/javascript" src="index.js"></script>

  <!-- Font Awesome -->
  <script defer src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
  <script defer src="https://use.fontawesome.com/releases/v5.14.0/js/v4-shims.js"></script>

  <!-- Materialize -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2:wght@500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Libre+Barcode+128+Text&display=swap" rel="stylesheet">


  <title></title>
</head>

<body>
  <div class="selling-items">
    <div class="row">
      <div class="col m4 l3">
        <div class="item item-1">
          <img class="item-pic item-pic-1" src="images/item-1.jpg" alt="">
          <hr />
          <div class="item-details">
            <span class="item-name">Blue Plaid Shirt</span>
            <span class="price">€23.99</span>
            <button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
          </div>
        </div>
      </div>

      <div class="col m4 l3">
        <div class="item item-2">
          <img class="item-pic item-pic-2" src="images/item-2.jpg" alt="">
          <hr />
          <div class="item-details">
            <span class="item-name">Blue Plaid Shirt</span>
            <span class="price">€23.99</span>
            <button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
          </div>
        </div>
      </div>

      <div class="col m4 l3">
        <div class="item item-3">
          <img class="item-pic item-pic-3" src="images/item-3.jpg" alt="">
          <hr />
          <div class="item-details">
            <span class="item-name">Blue Plaid Shirt</span>
            <span class="price">€23.99</span>
            <button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
          </div>
        </div>
      </div>

      <div class="col m4 l3">
        <div class="item item-4">
          <img class="item-pic item-pic-4" src="images/item-4.jpg" alt="">
          <hr />
          <div class="item-details">
            <span class="item-name">Blue Plaid Shirt</span>
            <span class="price">€23.99</span>
            <button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
          </div>
        </div>
      </div>

      <div class="col m4 l3">
        <div class="item item-5">
          <img class="item-pic item-pic-5" src="images/item-5.jpg" alt="">
          <hr />
          <div class="item-details">
            <span class="item-name">Blue Plaid Shirt</span>
            <span class="price">€23.99</span>
            <button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
          </div>
        </div>
      </div>

      <div class="col m4 l3">
        <div class="item item-6">
          <img class="item-pic item-pic-6" src="images/item-6.jpg" alt="">
          <hr />
          <div class="item-details">
            <span class="item-name">Blue Plaid Shirt</span>
            <span class="price">€23.99</span>
            <button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
          </div>
        </div>
      </div>

      <div class="col m4 l3">
        <div class="item item-7">
          <img class="item-pic item-pic-7" src="images/item-7.jpg" alt="">
          <hr />
          <div class="item-details">
            <span class="item-name">Blue Plaid Shirt</span>
            <span class="price">€23.99</span>
            <button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
          </div>
        </div>
      </div>

      <div class="col m4 l3">
        <div class="item item-8">
          <img class="item-pic item-pic-8" src="images/item-8.jpg" alt="">
          <hr />
          <div class="item-details">
            <span class="item-name">Blue Plaid Shirt</span>
            <span class="price">€23.99</span>
            <button class="item-add btn btn-lg btn-danger blue darken-4" type="button" name="button">View this item</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</body>

Answer 1

我没有发现 html 代码和样式有任何问题，甚至我用相同代码制作的文档也显示了您可能期望的正确结果。尝试添加浏览器支持并更新您的浏览器。或者尝试将 BR 标签放在所需产品之后。

Answer 2

本例需要对图片元素的高度进行标准化

解决方案：

在像 photoshop、paint 这样的照片编辑器上编辑图像的高度

===================== 或 ======================

css:

.item-pic {height: 20vw}

===================== 或 ======================

js:

let _height = 0;
$('.item-pic').each(function () {
    if ($(this).height() > _height) {
        _height = $(this).height();
    }
});
$('.item-pic').height(_height);

示例：https://codepen.io/Em-An/pen/ExKLZNG

大屏幕上的网格显示间隙

Grid on large screens showing gap

css

materialize