我一直在开发一个简单的产品页面来练习和更好地理解关键概念。
但是，我在媒体查询中遇到了 .carousel 网格的问题。第一个元素以 0x0 的宽度和高度渲染，我不明白为什么。此外，即使在媒体查询中定义了 gap 属性，也不会应用该属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Carrousel</title>
<style>
* { /* reset the styles */
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
padding: 0;
margin: 0;
box-sizing: border-box;
}
section {
margin-top: 48px;
}
main {
margin-top: 48px;
}
img {
max-width: 100%;
border-radius: 10px;
}
.container {
max-width: 75%;
margin: 0 auto; /* align content */
display: grid;
grid-template-columns: 1fr 1fr; /* create 2 columns of the same size */
gap: 24px;
}
@media (max-width: 780px) {
.container {
grid-template-columns: 1fr;
}
.carousel {
grid-auto-flow: column;
grid-auto-columns: 100%;
overflow-x:scroll;
}
.grid-item {
padding: 0;
margin: 0;
}
.grid-item:first-child {
outline: orange;
}
}
.carousel {
display: grid;
grid-template-columns: 1fr; /* for two columns: repeat(2, minmax(100, 1fr)) */
grid-auto-rows: 1fr;
gap: 8px;
scroll-snap-type: inline mandatory;
}
.grid-item {
height: auto;
scroll-snap-align: center;
}
.product-info {
position:sticky;
top: 3rem;
background-color: lightseagreen;
max-height: 200px;
h1 {
padding-top: 0;
line-height: 1.5rem;
}
}
</style>
</head>
<body>
<main>
<div class="container">
<div class="carousel">
<img class="grid-item" id="1" src="https://placehold.co/800x800" alt="default">
<img class="grid-item" id="2" src="https://placehold.co/800x800" alt="default">
<img class="grid-item" id="3" src="https://placehold.co/800x800" alt="default">
<img class="grid-item" id="4" src="https://placehold.co/800x800" alt="default">
<img class="grid-item" id="5" src="https://placehold.co/800x800" alt="default">
<img class="grid-item" id="6" src="https://placehold.co/800x800" alt="default">
</div>
<div class="product-info">
<h1>Product Title</h1>
<p>Product Information</p>
<p>$99.99</p>
<button>Add to cart</button>
</div>
</div>
</main>
</body>
</html>
我尝试调整宽度、最小宽度、最大宽度、高度和其他与尺寸相关的属性，但问题仍然存在。它似乎与滚动行为无关，因为即使删除该属性后，6 个元素中也只有 5 个可见。我还通过添加更多元素并注释掉第一个元素进行了测试，但问题仍然存在 - 新的第一个子元素的大小始终为 0x0。
尝试在网格项中定义高度：-
.grid-item {
height: 200px; /* Set a fixed height */
scroll-snap-align: center; }
对于间隙问题，请尝试将轮播设置为：-
.carousel {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Adjust size as necessary /
grid-auto-rows: 1fr; gap: 8px; / This should now apply /
overflow-x: scroll;
scroll-snap-type: x mandatory; / Change to x if scrolling horizontally */ }
让我知道这是否适合您