html - div中的图像要相等

Question

如何使3个div中的图像相等。

.Row
{
   width: 130%;
   border-spacing: 20px;
   margin-left: 30px;
   padding:1em;

}
.Column
{
   display: table-cell;
}

现在他们的高度不同了。这是 html

<div class="Row">
 <div class="Column">
 ...
 </div>
 <div class="Column">
 ...
 </div>
 <div class="Column">
 ...
 </div>
</div>

你可以在图片上看到我在说什么。如果我尝试在 css 中设置高度，什么也不会发生。

Here is the link to image

Answer 1

如果您希望所有图像具有相同的高度，您必须像这样指定图像的高度:

FIDDLE

但是您可以使用此 HTML 标记使其变得更加简单: FIDDLE

HTML:

<div class="Row">
    <img src="http://lorempixel.com/output/sports-q-c-640-480-7.jpg" />
    <img src="http://lorempixel.com/output/fashion-q-g-377-239-2.jpg" />
    <img src="http://lorempixel.com/output/fashion-q-c-1209-1039-10.jpg" />
</div>

CSS:

.Row {
    border-top: 2px solid aqua;
    border-bottom: 1px solid gray;
    padding:20px 0;
}

.Row img {
    height:150px;
}