当父级具有高度时，如何使两个内联块容器的高度相同：auto

Question

我有两个inline-block元素。带有图像的图块较高。我想匹配两个元素的高度，因此#keyPointsBlock必须与#caseSlider的高度相同。

有没有办法做到这一点？

/*-- Slider Section --*/
#slideSec {
  width: 100%;
  height: auto;
  min-height: 400px;
}
.slideSecBlock {
  display: inline-block;
  vertical-align: top;
  height: 400px;
  position: relative;
}
/*- Key Points -*/
#keyPointsBlock {
  width: 40%;
  background: green;
  position: relative;
}
#keyPointsTitle {
  font-family: 'Muli', sans-serif;
  font-size: 2rem;
  letter-spacing: .2rem;
  text-transform: uppercase;
}
#keyPointsList {
  text-decoration: none;
}
#keyPointsList li {
  margin-bottom: 8px;
}
/*- Case Slider -*/
#caseSlider {
  width: 60%;
  height: auto;
}
.caseSlide {
  width: 100%;
  height: 100%;
}
.caseSlide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

<section id="slideSec">
  <div class="slideSecBlock" id="keyPointsBlock">
    <div>
	  <h2 id="keyPointsTitle">Key Points</h2>
	    <ul id="keyPointsList">
		  <li>A</li>
		  <li>B</li>
		  <li>C</li>
		</ul>
	</div>
  </div>
  <div class="slideSecBlock" id="caseSlider">
    <div class="caseSlide">
      <img src="https://justifiedgrid.com/wp-content/uploads/life/biking/137646854.jpg" alt="">
     </div>
  </div>
</section>

Answer 1

在#slideSec上使用display: grid;和grid-template-columns: 40% 60%;。 .slideSecBlocks不需要宽度。为了使图像覆盖整个div，请将其设置为背景并使用background-size: cover;