html - div的高度相同

Question

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

图片

HTML

 .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;
    }

<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>

   

如何使这 3 个 block 的高度相同？ 这是在我的网站上，所以如果你愿意，你可以实时看到它 here .

我尝试通过具有特定高度的 img 来改变一些东西，但它还没有奏效。

Answer 1

你应该为同一个 div 使用 min-height css 属性

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