代码之家 › 专栏 › 技术社区 › Ekaterina Chistyakova

将div相互对齐,一个与img对齐

flexbox css html

Ekaterina Chistyakova · 技术社区 · 4 年前

我在制作产品卡时遇到了问题,比如说,如果我们简单一点:

.container {
  width: 600px;
  display: flex;
  align-items: flex-start;
}

.pic {
  flex: 0 0 60%;
  overflow: hidden;
  object-fit: cover;
  display: block;
  object-position: center center;
  align-self: stretch;
  max-height: 100%;
}

.text {
  flex: 0 0 40%;
  margin: 0;
}

<div class="container">
  <img class="pic" src="https://s3-eu-west-1.amazonaws.com/pravdasevera/p6bjtv0x/ub9z.jpg" alt="">
  <p class="text">
    Dignissimos, consequuntur. Ipsam totam aliquid obcaecati ipsum similique reiciendis enim soluta dolor nam eveniet at officiis delectus rem velit vero nulla doloribus, repellat, natus assumenda nemo sapiente? Eaque, veniam architecto? Unde corporis facilis
    perferendis quos exercitationem ab, qui repudiandae amet assumenda repellendus ipsam velit beatae voluptatibus maxime accusantium quas omnis nobis voluptate, aspernatur saepe recusandae est iure similique. Esse, natus?

  </p>
</div>

我需要的img部分是相同的大小作为p。我可以使它其他虎钳-文本部分将相应地调整img,但我需要它的其他方式。谢谢你的帮助!

0 回复 | 直到 4 年前

pr0cz 4 年前

尝试使用flex grow。

尝试添加 flex-grow: 1; 你的CSS类,而不是 flex: .

“flex grow CSS属性设置flex项目主大小的flex grow因子。”

.pic {
  flex-grow: 1;
  overflow: hidden;
  object-fit: cover;
  display: block;
  object-position: center center;
  align-self: stretch;
  max-height: 100%;
}

.text {
  flex-grow: 1;
  margin: 0;
}

演示: https://codepen.io/HugoGiraudel/pen/9a9ad8fb040f5efaf4e749b49cae7281

参考资料:

https://css-tricks.com/almanac/properties/f/flex-grow/

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow