Question

我目前在自己的信息页中有两个内联块div，其中包含我最近的书评。对于大多数窗口大小，这些部分匹配并占用相同的空间。但是，对于某些窗口尺寸，一个inline-block所占空间要小于另一个窗口，从而导致较小的div底部存在空白。

我有什么办法可以摆脱这个空白？

这是我的HTML和CSS：

html, body {
	margin: 0;
	padding: 0;
}
.newest-review-cover {
  z-index: 0;

}

.newest-review-cover img {
  display: block;
  height: 50%;
  width: 100%;


}

.newest-review-content h2 {
	
	color: white;
	font-size: 2rem;
	padding-top: 1em;
}

.newest-review-content h5 {
	padding: 1em 3em;
	color: white;
	font-size: 1rem;

}

.newest-review-content {
	background-color: black;
	padding: 2em 0;
	text-align: center;

}





.book-review img{
  width: 100%;
  height: 200%;

  


}



.book-review {
	background-color: black;
	display: inline-block;
	width: 33%;
	padding-left: 0;
	border-right: solid 3px #f28600;
	border-left: solid 3px #f28600;
	border-top: solid 5px #f28600;
	margin-left: -4px;
	margin-top: 0;

	vertical-align: top;




}

.book-review p {
	color: white;
	margin: 1em 0;
}

.post-title {
	text-align: center;
	
}



.post-description {
	padding: 0 2em;
	height: 100px;

}

<!DOCTYPE html>
<html>
	
<head> 
	<link href="header+footer.css" rel = "stylesheet" type="text/css" />
	<link href="Homepage.css" rel = "stylesheet" type="text/css" />
	 <meta charset="utf-8">
	<title> The Novel Column - Book Reviews </title>

</head>
	

<body>

<nav>

	<h1> <a href="index.html"> The Novel Column </a> </h1>

	<ul>
		<li> <a href="#"> Resources </a>
			<ul> 
				<li> <a href="#"> Book Reviews </a> </li>
				<li> <a href="#"> Quotes and Principles </a> </li>
				<li> <a href="#"> Community Aid </a> </li>
				
			</ul>
		</li>
		<li> <a href="#"> About Us </a> </li>
	</ul>
	
</nav>

<section class="newest-review-cover"> 
	<img src="images/the-5am-club-poster.jpg" alt="The 5AM Club">

	<div class="newest-review-content"> 
		<h2> The 5AM Club Review </h2>
		<h5> Maximize your productivity, be around nice things, and spend more time doing what you want! </h5>
	</div>
</section>

<div class="all-posts"> 
	<a href="the-one-thing.html">
	<div class="book-review" id="the-one-thing"> 
		<img src="https://thenovelcolumn.com/wp-content/uploads/2019/05/The-ONE-Thing-Image-3.jpg" alt="The ONE Thing">

		<div class="book-description">
		<p class="post-title"> The ONE Thing Review </p>
		<p class="post-description"> Declutter your life, think big, and achieve mastery!</p>
		</div>

	</div>
	</a>

	<a href="the-10x-rule.html">
	<div class="book-review" id="the-10x-rule">
		<img src="https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-Rule-Image-2-e1555476700855.jpg" alt="The 10X Rule" alt="The 10X Rule">

		<div class="book-description">
		<p class="post-title"> The 10X Rule Review </p>
		<p class="post-description"> Unlock your potential and multiply happiness and productivity!</p>
		</div>
	</div>
</a>
	
</div>



</body>




</html>

谢谢您的帮助！

Answer 1

我认为问题出在.post-description

如果您查看两个块的.post-description，则它们的文本具有不同的高度。

您可以将固定高度设置为.post-description，并将vertical-align: top;设置为.book-review

html, body {
	margin: 0;
	padding: 0;
}
.newest-review-cover {
  z-index: 0;

}

.newest-review-cover img {
  display: block;
  height: 50%;
  width: 100%;


}

.newest-review-content h2 {
	
	color: white;
	font-size: 2rem;
	padding-top: 1em;
}

.newest-review-content h5 {
	padding: 1em 3em;
	color: white;
	font-size: 1rem;

}

.newest-review-content {
	background-color: black;
	padding: 2em 0;
	text-align: center;

}





.book-review img{
  width: 100%;
  height: 200%;

  


}



.book-review {
	background-color: black;
	display: inline-block;
	width: 33%;
	padding-left: 0;
	border-right: solid 3px #f28600;
	border-left: solid 3px #f28600;
	border-top: solid 5px #f28600;
	margin-left: -4px;
	margin-top: 0;

  vertical-align: top; /*Added this to set alignment to top*/


}

.book-review p {
	color: white;
	margin: 1em 0;
}

.post-title {
	text-align: center;
	 
}



.post-description {
	padding: 0 2em;
    height: 150px; /*Added a fixed height*/
}

<!DOCTYPE html>
<html>
	
<head> 
	<link href="header+footer.css" rel = "stylesheet" type="text/css" />
	<link href="Homepage.css" rel = "stylesheet" type="text/css" />
	 <meta charset="utf-8">
	<title> The Novel Column - Book Reviews </title>

</head>
	

<body>

<nav>

	<h1> <a href="index.html"> The Novel Column </a> </h1>

	<ul>
		<li> <a href="#"> Resources </a>
			<ul> 
				<li> <a href="#"> Book Reviews </a> </li>
				<li> <a href="#"> Quotes and Principles </a> </li>
				<li> <a href="#"> Community Aid </a> </li>
				
			</ul>
		</li>
		<li> <a href="#"> About Us </a> </li>
	</ul>
	
</nav>

<section class="newest-review-cover"> 
	<img src="images/the-5am-club-poster.jpg" alt="The 5AM Club">

	<div class="newest-review-content"> 
		<h2> The 5AM Club Review </h2>
		<h5> Maximize your productivity, be around nice things, and spend more time doing what you want! </h5>
	</div>
</section>

<div class="all-posts"> 
	<div class="book-review" id="the-one-thing"> 
		<img src="https://thenovelcolumn.com/wp-content/uploads/2019/05/The-ONE-Thing-Image-3.jpg" alt="The ONE Thing">

		<div class="book-description">
		<p class="post-title"> The ONE Thing Review </p>
		<p class="post-description"> Declutter your life, think big, and achieve mastery!</p>
		</div>

	</div>
 
	<a href="the-10x-rule.html">
	<div class="book-review" id="the-10x-rule">
		<img src="https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-Rule-Image-2-e1555476700855.jpg" alt="The 10X Rule">

		<div class="book-description">
		<p class="post-title"> The 10X Rule Review </p>
		<p class="post-description"> Unlock your potential and multiply happiness and productivity!</p>
		</div>
	</div>
</a>
	
</div>



</body>




</html>

调整窗口大小时，div上的空白

1 个答案: