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>

基本思想是图像可以最大为400px ，但必须始终至少保留150px，以使文本内容位于右侧。文字内容将填充尽可能多的空间-图像始终至少留有150px。如果您调整上面的代码段的大小，则可以看到图像的大小是敏感的。

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

注意事项：

不能包装.right div，因为在此应用程序中，它们使用flex order属性以各种宽度重新排列。我在此处包括了一个媒体查询以进行演示。
我已经考虑过使用javascript将.left div的高度设置为等于.right div的总和，但是我真的很讨厌使用javascript进行布局，因此我想避免这种情况-尤其是因为如果内容应更改或浏览器调整大小，则需要重新计算高度。
我尝试使用here中讨论过的css网格，但这最终成为一个问题，因为这迫使第一个.right div与其网格行的高度相等，这不是我想要的。
在.right div上设置左页边距也是有问题的，因为图像大小是自适应的，并且我设置的任何页边距最终在某些屏幕宽度上都是错误的。

Answer 1

这是一个视觉技巧。这个想法是在right元素内使用另一个元素，以使内容始终保持在正确的位置，即使该元素变为全角，这些元素的大小也将与图片相似，但是我们添加了一些负边距来覆盖该元素的填充/边框正确的元素，并创造出非包装元素的错觉。然后，使图像成为绝对位置。

.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放在float旁边的列中

1 个答案: