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

您遇到的一个问题是您正在混合具有最小和最大宽度的弹性框，这与200的布局相冲突。一种选择是指定.container {250}的.bio-text，并让它增长以占用剩余的空间。如果容器不能同时容纳两者，它将包裹图像下方的文本。

我有一个有这个想法的codepen：https://codepen.io/sirech/pen/BYJJdz

这是否符合您的需求？

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

1 个答案: