将 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 像素。文本内容将填满尽可能多的空间——图像始终至少留有 150 像素。如果你调整上面的 sn-p 的大小，你可以看到图像的大小是响应式的。

问题：我希望所有.right div 都留在列中，并且一旦它们的高度超过.left div 的高度就不要换行。

注意事项：

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

Answer 1

这是一个视觉技巧。这个想法是在右侧元素中使用另一个元素来保持内容始终在右侧，即使元素变成全宽，这些元素将具有与图像相似的大小，但我们添加了一些负边距来覆盖填充/边框正确的元素并创建非环绕元素的错觉。然后你将图像设置为绝对位置。

.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>