Question

two of these images are different height

我正在在线上进行Web开发课程，而第一个HTML / CSS部分围绕着制作每个主题的网站而展开。我试图使所有这些图像彼此相邻并具有相同的大小-由于某些原因，两个div仍然比其余的更大，设置高度对于这两个不起作用。

这是我在CSS中尝试过的内容：

body{
font-family: 'Barlow', sans-serif;
background:white;
max-width: 1000px;
margin: 0 auto;

.product {
border: 1px solid grey;
width: 200px;
margin: 5px;
padding: 5px;
display: inline-block;
}

img{
max-width: 100%;
height: 200px;
}

.product类的所有div如何创建的示例：

 <div class="product">
<a href="product-details-lip-balm.html">
    <img src="images/makeup5.jpg" alt="Lip balm">
</a>
<h4><a href="product-details-lip-balm.html">Lip balm</a></h4>
<p> &pound; 5</p>
<p> Organic lip balm by Make Me Bio</p>
<a href="product-detail.html" class="button">More info</a>
<a href="" class="button">Add To Cart</a>

two images have different height

Answer 1

我认为您可能可以使用“ display：block;”而不是“ display：inline-block;”

在“产品”类中使用以下代码。

const M = window.M;

如果您提供“ margin：auto;”对于img，则图像将居中。

Answer 2

img{
  max-height:200px;
}

会起作用！

Answer 3

好吧，我找到了解决此问题的方法-那时我对Flexbox一无所知，但现在我刚刚在Skillshare上开始了本课程的第二部分，显然将所有产品div放入了flex容器并进行设置flex-wrap：包装;解决我的问题。是的，很高兴。谢谢大家的帮助！

我网站上的两张图片与其他图片的高度不同

3 个答案: