问题描述
我正在使用Materialize网格，但是由于某些原因，当我的网格在大屏幕上时会出现间隙。 我当时使用的是Bootstrap和Materialize，但意识到同时使用这是一个坏主意，因此我删除了Bootstrap网格并在Materialize网格中重新进行了修改。
但是我不确定是否与切换到Materialize网格有关，因为我在Bootstrap网格上也遇到了同样的问题。我可能在页眉和页脚中弄乱了脚本标签和链接标签，以至于弄乱了某些东西。
请参见下面的屏幕截图以及我的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>解决方法
我没有发现html代码或样式中的任何错误，甚至我用相同的代码制作的文档也显示出您可能期望的正确结果。尝试添加浏览器支持并更新浏览器。 或者尝试将BR标签放在所需产品的后面。
,这种情况下需要标准化图像元素的高度
解决方案：
在照片编辑器（例如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);