如何正确使块浮动图像

Question

这是我的代码：

    .container {
      width: 90%;
      margin: 0 auto;
    }
    .holder {
      display: inline-block;
      width: 75%;
      background-color: pink;
    }
    img {
      width: 25%;
      height: auto;
      float: left;
    }
    .data {
      display: inline-block;
      width: 50%;
    }

<div class="container">
    <h3>Title lacinia sed posuere non, ultricies in nisi</h3>
    <div>
      <img src="http://via.placeholder.com/350x150" alt="Placeholder">
      <p class="description">Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero.</p>
      <div class="holder">
      <p class="data">Some Data 1</p><!--
      --><p class="data">Some Data 2</p>
      </div>
    </div>
  </div>

我希望描述和数据块在图像周围浮动。并且数据段各占50%（实际项目的数据行多，但每行2个数据）。它在大屏幕上看起来很棒：

但一旦我们在描述中添加更多文本或缩小窗口大小，数据块将开始换行，因为我将持有人设置为 75% 宽度（图像为 100% - 25%），数据段落不会占据整个宽度的 50%：

我正在尝试解决此问题（使“某些数据 1”和“某些数据 2”占用每个可用空间的 50% - 图像 1 正确，图像 2 不正确）但找不到离开。请帮帮我。我需要纯 CSS 解决方案。

Answer 1

除非 html 是固定的，否则这应该可以吗？将图片放入容器中，并使用 flexbox 在文本下方做两列。

.container {
  width: 90%;
  margin: 0 auto;
}

.holder {
  display: flex;
  background-color: pink;
}

.block img {
  width: 25%;
  float: left;
  margin-right: 12px;
}

.data {
  width: 50%;
}

<div class="container">
  <h3>Title lacinia sed posuere non, ultricies in nisi</h3>
  <div class="block">
    <img src="http://via.placeholder.com/350x150" alt="Placeholder"> Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero.
    Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi.
    Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere
    non, ultricies in nisi. Cras pharetra felis libero. Aliquam nibh metus, lacinia sed posuere non, ultricies in nisi. Cras pharetra felis libero.
    <div class="holder">
      <p class="data">Some Data 1</p>
      <p class="data">Some Data 2</p>
    </div>
  </div>
</div>