html - 文本迫使 DIV 不保持相同的大小

Question

我试图在我的页面上保持一切平等。当一个 DIV 中的文本太多时，它会将一侧向下推。如何使两个 DIV 的高度与其在桌面上的父 DIV 的最大值保持一致？

我试过摆弄桌面显示器，但对我来说效果不是很好，而且我也不是很精通。

<style><!--

	
.pageRow {
	display: inline-block;
	position: relative;
	width: 100%;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}


.pageBlock {
	display: inline-block;
	position: relative;
	width: 50%;
	height: 100%;
	text-align: center;
	vertical-align: top;
	padding-left: 15px;	
	padding-right: 15px;
	white-space: normal;
	
}



.pageText {
	display: inline-block;
	position: relative;
	max-height: 100%;
	max-width: 100%;
	object-fit: contain;
	vertical-align: top;
}


.pageMap {
	display: inline-block;
	vertical-align: bottom;
}



@media (max-width: 768px) {


.pageRow {
    display: inline-block;
	white-space: normal;

}  

.pageBlock {

    display: inline-block;
	width: 75%;
	margin-bottom: 15px;
	
}




.pageText {
	display: inline-block;
	position: relative;
	vertical-align: middle;
	align-items: center;
	object-fit: contain;
    text-align: center;
    width: 100%;

    
}


.pageMap {
	display: inline-block;
    width: 100%;
}
}
--></style>

<div class="pageRow">
	<div class="pageBlock">
		<div class="pageText">
			<p style="text-align: center;"><strong>Title 1</strong></p>
<p><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></p>
		</div><!--/.pageText-->
		<div class="pageMap">
			<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d55565170.29301636!2d-132.08532758867793!3d31.786060306224!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54eab584e432360b%3A0x1c3bb99243deb742!2sUnited+States!5e0!3m2!1sen!2sus!4v1505170144549" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
		</div><!--/.pageMap-->
	</div><!--/.pageBlock-->
	
	<div class="pageBlock">
			<div class="pageText">
				<p style="text-align: center;"><strong>Title 2</strong></p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</p>
			</div><!--/.pageText-->
			<div class="pageMap">
				<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d55565170.29301636!2d-132.08532758867793!3d31.786060306224!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54eab584e432360b%3A0x1c3bb99243deb742!2sUnited+States!5e0!3m2!1sen!2sus!4v1505170144549" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe></div>
			</div><!--/.pageMap-->
		</div><!--/.pageBlock-->

</div><!--/.pageRow-->

Answer 1

您可能应该将高度和宽度固定为最大值，这样文本就不能再增加 div。

    height: 500px; /*or something around that, there isn't any width percentages */