html - 我如何响应地处理包装图像和文本的 div？

Question

我有一个 div，左边是一个图像，右边是一个包含文本的 div，两者之间有一些边距。当窗口大小变窄时，我希望文本在其最大宽度和最小宽度之间收缩，同时缩小图像，以便它们彼此相邻，并且只有在文本缩小后才能跳到图像下方.

但实际情况是 - 一旦文本碰到图像，它就会跳到下方，而不是缩小到最小宽度并试图保持在图像旁边。

我的代码是这样的:

<div class="container">
  <img class="headshot" src="..." />
  <div class="bio-text">
    <h3>BIO</h3>
    <p>Lorem ipsum...</p>
  </div>
</div>


.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  width: 80%;
  margin: auto;
}

.headshot {
  max-width: 100%;
  height: auto;
  margin: 40px;
}

.bio-text {
  max-width: 450px;
  min-width: 250px;
}

任何见解将不胜感激!

Answer 1

您遇到的一个问题是您混合了具有最小和最大宽度的 flexbox，这与 .container 的布局冲突。一种选择是为 .bio-text 分配一个 250px 的 flex，让它增长以占据剩余的空间。如果容器不能容纳两者，它会将文本包裹在图像下方。

我有一个关于这个想法的代码笔:https://codepen.io/sirech/pen/BYJJdz

这是否符合您的需求？