时间戳

首页 > 解决方案 > CSS并排与flexbox相同的高度

html - CSS并排与flexbox相同的高度

问题描述

我试图让 2divs并排使用flexbox，但其中包含文本的 div 比图像侧高，我不知道为什么。

.serviceEntry {
  display: flex;
  margin-bottom: 2rem;
}

.serviceImg,
.serviceContent {
  flex: 1;
}

.serviceContent {
  color: white;
  background-color: #93AEC2;
  padding: 0px 10px;
  line-height: 2;
}
<div class="serviceEntry">
  <div class="serviceImg">
    <img src="https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-1024x668.jpg" class="attachment-large size-large" alt="" srcset="https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-1024x668.jpg 1024w, https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-300x196.jpg 300w, https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-768x501.jpg 768w, https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-1536x1001.jpg 1536w, https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37.jpg 2000w"
      sizes="(max-width: 1024px) 100vw, 1024px" width="1024" height="668">
  </div>
  <div class="serviceContent">
    <h3><a href="https://hope.rudtek.dev/services/women/">Women</a></h3>
    We provide specialized individual treatment and cognitive behavioral therapy to empower women in all aspects of life, including personal growth, overcoming mood and anxiety disorders, and navigating major life transitions.
  </div>
</div>

这是我的小提琴：https ://jsfiddle.net/bu1q359z/

标签： htmlcssflexbox

解决方案

display:flex也可用于.serviceImg匹配text和图像height（并排）

Js 小提琴：https ://jsfiddle.net/ou7ktr2e/

现场演示：（运行片段并单击整页以查看它的工作）

.serviceEntry {
  display: flex;
  margin-bottom: 2rem;
}

.serviceContent {
  flex: 1;
}

.serviceImg {
  display: flex;
  flex: 1;
}

.serviceContent {
  color: white;
  background-color: #93AEC2;
  padding: 0px 10px;
  line-height: 2;
}
<div class="serviceEntry">
  <div class="serviceImg">
    <img src="https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-1024x668.jpg" class="attachment-large size-large" alt="" srcset="https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-1024x668.jpg 1024w, https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-300x196.jpg 300w, https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-768x501.jpg 768w, https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37-1536x1001.jpg 1536w, https://hope.rudtek.dev/wp-content/uploads/2020/08/hopewellness-cbt-falls-church-37.jpg 2000w" sizes="(max-width: 1024px) 100vw, 1024px" width="1024" height="668">
  </div>
  <div class="serviceContent">
    <h3><a href="https://hope.rudtek.dev/services/women/">Women</a></h3>
    We provide specialized individual treatment and cognitive behavioral therapy to empower women in all aspects of life, including personal growth, overcoming mood and anxiety disorders, and navigating major life transitions.
  </div>
</div>

推荐阅读