将 div 保留在浮动旁边的列中

Question

这是一些标记的示例，css我正在使用：

.left {
  max-width: calc(100% - 150px);
  float: left;
  margin-right: 10px;
}

img {
  width: 400px;
  max-width: 100%;
}

.right {
  background: #eee;
  padding: 10px;
  margin: 10px 0;
  overflow: auto;
  border: 1px solid #999;
}

@media (max-width: 400px) {
  .wrapper {
    display: flex;
    flex-direction: column;
  }
  .right.top {
    order: 1;
  }
  .right.bottom {
    order: 3;
  }
  .left {
    order: 2;
  }
}

<div class="wrapper">
  <div class="left"><img src="https://i.stack.imgur.com/W6Sd8.png" /></div>
  <div class="right top">Hello, I am Kitteh</div>
  <div class="right top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  <div class="right bottom">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</div>
  <div class="right bottom">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? </div>
</div>

基本思路是图像可以最大 400 像素，但必须始终为右侧的文本内容留出至少 150 像素。文本内容将尽可能多地填满 space - 图像始终至少留出 150 像素。如果您调整上面代码段的大小，您可以看到图像的大小是自适应的。

问题： 我希望所有 .right div 都留在一列中，一旦它们的高度超过.left div.

注意事项：

包装 .right divs 不是一个选项，因为在这个应用程序中，它们使用 flex order 属性以不同的宽度重新排列。我在这里包含了一个媒体查询来演示。
我考虑过使用 javascript 将 .left div 的高度设置为等于 .right div 的总和，但我真的很讨厌使用 javascript 进行布局，我想避免这种情况 - 特别是因为如果内容发生变化或浏览器调整大小，它需要重新计算高度。
我尝试使用 css 网格，如所讨论的那样，但它最终成为一个问题，因为这迫使第一个 .right div 与它的高度相同网格行，这不是我想要的。
在 .right div 上设置左边距也是有问题的，因为图像大小是响应式的，而且我设置的任何边距在某些屏幕宽度下最终都是错误的。

Answer 1

这是一个视觉技巧。这个想法是在右边的元素内使用另一个元素来保持内容总是在右边，即使元素变成全宽，这些元素的大小与图像相似，但我们添加了一些负边距来覆盖 padding/border正确的元素并创建非包装元素的错觉。然后你把图片做成绝对位置。

.wrapper {
  position:relative;
}
.left {
  max-width: calc(100% - 150px);
  position: absolute;
  margin-right: 10px;
}

img {
  width: 400px;
  max-width: 100%;
}

.right {
  background: #eee;
  padding: 10px;
  height: 90px;
  margin: 10px 0;
  border: 1px solid #999;
}

.right:before {
  content: "";
  float: left;
  height: 112px;
  max-width: calc(100% - 100px); 
  width: 410px; 
  margin: -11px 10px -11px -11px;
  background: #fff;
  border-right: 1px solid #999;
}

<div class="wrapper">
  <div class="left"><img src="https://i.stack.imgur.com/W6Sd8.png" /></div>
  <div class="right">Hello, I am Kitteh</div>
  <div class="right">Meow, meow.</div>
  <div class="right">And furthermore... meow.</div>
  <div class="right">Another right</div>
  <div class="right">More right ...</div>
</div>

更新

如果高度不固定可以尝试使用 flexbox，拉伸对齐会使伪元素与内容具有相同的高度：

.left {
  max-width: calc(100% - 150px);
  position: absolute;
  margin-right: 10px;
}

img {
  width: 400px;
  max-width: 100%;
}

.right {
  background: #eee;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #999;
  display:flex;
}

.right:before {
  content: "";
  max-width: calc(100% - 100px); 
  width: 410px; 
  flex-shrink:0;
  margin: -11px 10px -11px -11px;
  background: #fff;
  border-right: 1px solid #999;
}

<div class="wrapper">
  <div class="left"><img src="https://i.stack.imgur.com/W6Sd8.png" /></div>
  <div class="right">Hello, I am Kitteh Hello, I am Kitteh Hello, I am Kitteh Hello, I am Kitteh Hello, I am Kitteh Hello, I am Kitteh Hello, I am Kitteh</div>
  <div class="right">Meow, meow.</div>
  <div class="right">And furthermore... meow. And furthermore... meow. And furthermore... meow. And furthermore... meow. And furthermore... meow.</div>
  <div class="right">Another right</div>
  <div class="right">More right ...</div>
</div>

将 div 保留在浮动旁边的列中

Keep divs in a column next to float

html

css

css-float