如何解决使用CSS Flex
嗨,我目前正在尝试显示我的卡片,因此每行有3张卡片,并且只要有更多卡片,它将换行到下一行。我已经将flex设置为每行3,但是似乎没有用。
第二,似乎我无法定义卡的大小,因此图像使卡太大。我该如何解决?
最后,我将如何设置它,以使卡片行位于页面中间(而不是从左侧开始)?
.products {
display:flex;
flex-wrap: wrap;
width:80%;
margin: 0 auto;
}
.product-card{
flex: 1 30%;
flex-grow: 1;
padding-right: 5px;
border: 2px solid black;
}
.product-image img {
max-width: 100%;
}
.product-info h5{
margin-top: auto;
font-family: Helvetica;
font-style: normal;
font-weight: bold;
line-height: 120.2%;
padding-top: 2%;
/* or 29px */
color: #363636;
}
.product-info h6{
font-family: Helvetica;
font-style: normal;
font-weight: normal;
line-height: 120.2%;
/* or 28px */
color: #363636;
}
<section class='products'>
<a href="">
<div class='product-card'>
<div class='product-image'>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" "https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" "https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" alt="">
</div>
<div class='product-info'>
<h5>Original Bomb</h5>
<h6>$3/roll</h6>
</div>
</div>
</a>
<a href="">
<div class='product-card'>
<div class='product-image'>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" "https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" "https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" alt="">
</div>
<div class='product-info'>
<h5>Original Bomb</h5>
<h6>$3/roll</h6>
</div>
</div>
</a>
<a href="">
<div class='product-card'>
<div class='product-image'>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" "https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" "https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" alt="">
</div>
<div class='product-info'>
<h5>Original Bomb</h5>
<h6>$3/roll</h6>
</div>
</div>
</a>
<a href="">
<div class='product-card'>
<div class='product-image'>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" "https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" "https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" alt="">
</div>
<div class='product-info'>
<h5>Original Bomb</h5>
<h6>$3/roll</h6>
</div>
</div>
</a>
<a href="">
<div class='product-card'>
<div class='product-image'>
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" "https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" "https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" alt="">
</div>
<div class='product-info'>
<h5>Original Bomb</h5>
<h6>$3/roll</h6>
</div>
</div>
</a>
</section>
解决方法
您要将flex
添加到.product-card
div中,但是<a>
元素是您要添加flex
的实际子元素。
.products {
display:flex;
flex-wrap: wrap;
width:80%;
margin: 0 auto;
}
a {
display: block;
box-sizing: border-box;
flex: 33.3%;
border: 1px solid black;
padding: 5px;
}
.product-image img {
max-width: 100%;
}
.product-info h5{
margin-top: auto;
font-family: Helvetica;
font-style: normal;
font-weight: bold;
line-height: 120.2%;
padding-top: 2%;
/* or 29px */
color: #363636;
}
.product-info h6{
font-family: Helvetica;
font-style: normal;
font-weight: normal;
line-height: 120.2%;
/* or 28px */
color: #363636;
}
<section class='products'>
<a href="">
<div class='product-card'>
<div class='product-image'>
<img src="https://www.fillmurray.com/640/360" alt="">
</div>
<div class='product-info'>
<h5>Original Bomb</h5>
<h6>$3/roll</h6>
</div>
</div>
</a>
<a href="">
<div class='product-card'>
<div class='product-image'>
<img src="https://www.fillmurray.com/640/360" alt="">
</div>
<div class='product-info'>
<h5>Original Bomb</h5>
<h6>$3/roll</h6>
</div>
</div>
</a>
<a href="">
<div class='product-card'>
<div class='product-image'>
<img src="https://www.fillmurray.com/640/360" alt="">
</div>
<div class='product-info'>
<h5>Original Bomb</h5>
<h6>$3/roll</h6>
</div>
</div>
</a>
<a href="">
<div class='product-card'>
<div class='product-image'>
<img src="https://www.fillmurray.com/640/360" alt="">
</div>
<div class='product-info'>
<h5>Original Bomb</h5>
<h6>$3/roll</h6>
</div>
</div>
</a>
<a href="">
<div class='product-card'>
<div class='product-image'>
<img src="https://www.fillmurray.com/640/360" alt="">
</div>
<div class='product-info'>
<h5>Original Bomb</h5>
<h6>$3/roll</h6>
</div>
</div>
</a>
</section>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。