如何使多个容器的高度与高度相同：自动

Question

我有两个内联块元素，它们是容器 - #keyPointsBlock 和 #caseSlider。带有图像的块将始终更高。我想匹配两个元素的高度，所以#keyPointsBlock 需要与#caseSlider 的高度相同。在这种情况下，我无法将父元素的 height: auto 更改为固定数字。

有没有办法做到这一点？

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

只需使用 Flexbox 并将 display: flex 添加到您的 #slideSec 中，它们就会以相同的高度对齐。

这在行方向上作为 flex 子级（默认）工作，使用align-items 默认stretch，将使同一行上的所有子级具有相同的高度，无论哪个最高。

此外，将display: block 添加到您的img 中，使其正确排列（不包括内联/块元素周围的空白），然后删除所有height: 100%（和height: auto）默认值），因为这不适用于 Flexbox。

注意，在下面的代码示例中，我删除了不必要的属性。

如果你也需要控制内部元素，最好嵌套 Flexbox。

堆栈sn-p

/*-- Slider Section --*/
#slideSec {
  min-height: 400px;
  display: flex;
}

.slideSecBlock {
  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%;
}

.caseSlide {
}

.caseSlide img {
  display: block;
  width: 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 2

您可以使用 flex-box 来实现这一点。我对#slideSec 进行了 CSS 更改 - 添加了 flex 并为 .slideSecBlock 删除了高度。使用 flexbox here 进行播放

/*-- Slider Section --*/
#slideSec {
  width: 100%;
  height: auto;
  min-height: 400px;
  display: flex;
}
/*- Key Points -*/
#keyPointsBlock {
  width: 40%;
  background: green;
}
#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%;
}
.caseSlide {
  width: 100%;
  font-size: 0;
}
.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>