div的高度相同

Question

我希望3个div具有相同的高度。

图片  

HTML

＆＃13;

＆＃13;

 .more-bottom {
    padding: 4em 0;
    background: #DCEDF9;
    }
    .more-bottom-grids {
    margin: 4em 0 4em 0;
    height: 10px;
    }
    .more-bottom-grid-img img {
    width: 100%;
    }
    .more-bottom-grid-info {
    background: #FFF;
    padding: .5em;
    }
    .more-bottom-grid-text {
    padding: 1em;
    }
    .more-bottom-grid-text h5 {
    margin: 0;
    font-size: .875em;
    color: #383838;
    line-height: 1.8em;
    }
    .more-bottom-grid-text p {
    margin: 1em 0 0 0;
    font-size: .875em;
    color: #BBBBBB;
    line-height: 1.8em;
    }

＆＃13;

<div class="container">
			<div class="more-bottom-grids">
				<div class="col-md-4 more-bottom-grid">
					<div class="more-bottom-grid-info">
						<div class="more-bottom-grid-img" id="experienceutrecht">
							<img src="images/ExperienceUtrecht/Attractions/Architecture/8.jpg" alt="" />
						</div>
						<div class="more-bottom-grid-text">
							<h5>Stadhuis</h5>
							<p><i class="fa fa-map-marker" aria-hidden="true"></i> Korte Minrebroederstraat 2, 3512 GG Utrecht</p>
						</div>
					</div>
				</div>
				<div class="col-md-4 more-bottom-grid">
					<div class="more-bottom-grid-info">
						<div class="more-bottom-grid-img" id="experienceutrecht">
							<img src="images/ExperienceUtrecht/Attractions/Architecture/9.jpg" alt="" />
						</div>
						<div class="more-bottom-grid-text">
							<h5>Stadskantoor</h5>
							<p><i class="fa fa-map-marker" aria-hidden="true"></i> Stadsplateau 1, 3521 AZ Utrecht</p>
						</div>
					</div>
				</div>
				<div class="col-md-4 more-bottom-grid">
					<div class="more-bottom-grid-info">
						<div class="more-bottom-grid-img" id="experienceutrecht">
							<img src="images/ExperienceUtrecht/Attractions/Architecture/10.jpg" alt="" />
						</div>
						<div class="more-bottom-grid-text">
							<h5>The Wall</h5>
							<p><i class="fa fa-map-marker" aria-hidden="true"></i> Hertogswetering 183, 3543 AS Utrecht</p>
						</div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>

   

＆＃13;

＆＃13;

＆＃13;

如何为这3个街区获得相同的高度？ 这是在我的网站上，所以如果你愿意，你可以看到它here。

我试图用特定高度的img改变一些东西，但它还没有工作。

Answer 1

你应该为同样的div使用min-height css属性

.more-bottom-grid-info {
background: #FFF;
padding: 0.5em;
min-height: 340px;

}

Answer 2

你真的只有两个选择。

1. 在每张卡片上设置最小高度（白色背景的容器）。
2. 使用flexbox，我建议您在flexboxpatterns查看卡片组部分，了解详细的漫步信息。