html - 如何垂直对齐动态长度的文本，同时让其环绕 float 图像？

Question

我正在尝试设置一个包含 float 到左上角的图像和未知长度文本的 div。目标是让文本在 div 的中间居中(如果它小于图像)，或者如果图像足够大则环绕图像。

我的总体布局是:

<div class="wrapper">
  <img src="http://placekitten.com/50/50" class="image" style="float: left">
  <p class="text">
    Text goes here
  </p>
</div>

我试过显示表格和 flexbox，但它们将图像和文本视为不同的 block ，并防止长文本环绕图像。固定高度也不起作用，因为文本的长度是可变的，并且在开始环绕图像之前可能有几行需要垂直对齐。

我设置了一个 fiddle结果是我想要得到的。它使用两种不同的硬编码样式，但我试图找到一个无论提供多少文本都可以工作的单一解决方案。

有没有办法在没有某种 javascript hack 的情况下解决这个问题？

Answer 1

一个解决方案是用包装器包装内容，这样它就不会作为直接后代继承 flex 属性。这也使您可以根据需要灵活地使用 flex。

.wrapper {
  border: 1px solid black;
  padding: 0;
  overflow: auto;
  display: flex;
}

.image {
  vertical-align: middle;
}

.text {
  margin: 0;
}

.content {
  flex: 1;
}

.content p {
  display: inline;
  vertical-align: middle;
}

<p>
  This text should be centered vertically:
</p>

<div class="wrapper">
  <div class="content">
    <img src="http://placekitten.com/50/50" class="image">
    <p class="text">
      A little bit of text!
    </p>
  </div>
</div>

<p>
  This text should wrap around the image, going underneath it:
</p>

<div class="wrapper">
  <div class="content">
    <img src="http://placekitten.com/50/50" class="image">
    <p class="text">
      A lot of text! I mean a whole lot! Like tons and tons! You won't believe how much text. It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going?
      Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who
      knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! Oh wait, it's over.
    </p>
  </div>
</div>

<p>
  This is what I'm trying to avoid:
</p>

<div class="wrapper">
  <div class="content">
    <img src="http://placekitten.com/50/50" class="image">
    <p class="text">
      A lot of text! I mean a whole lot! Like tons and tons! You won't believe how much text. It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going?
      Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who
      knows, but it's doing it! Oh wow it just isn't stopping. So much text! It's still going even. How is it still going? Who knows, but it's doing it! Oh wow it just isn't stopping. So much text! Oh wait, it's over.
    </p>
  </div>
</div>