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

Answer 2

高度/最大高度有效，但它的外观取决于您设置高度/最大高度的大小。因为高度是以百分比形式设置的（例如，对于演示，您可以使用 - 使用jsfiddle！），高度调整到高度的50％，这是可变的。但由于设置了最大高度，文本正在包装。

另外，当我最初复制你的代码来创建小提琴时，你有一个额外的关闭div标签，请注意这一点。要使以下css起作用，请将第2段（右侧div）中的文本放在span标记之间。您当前的代码只在左侧div中包含span标记之间的文本。

我将你的div缩小到45％（从50％），因为当文本换行时，滚动条是看不见的，除非用户滚动。请在代码段或fiddle

中试用

  .pageRow {
  display: inline-block;
  position: relative;
  width: 100%;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.pageBlock {
  display: inline-block;
  position: relative;
  width: 45%;
  height: 100%;
  text-align: center;
  vertical-align: top;
  padding-left: 15px;
  padding-right: 15px;
  white-space: normal;
}

.pageText p span {
  height: 120px;
  max-height: 90px!important;
  display: inline-block;
  overflow-y: auto;

<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><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. It has survived not only five centuries.</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>
<!---page Row-->

文字强制DIV不能保持相同的大小

2 个答案: