如何正确制作块浮动图像

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条数据）。而且在大屏幕上看起来很棒：

但是一旦我们在描述中添加更多文本或缩小 window 大小，数据块将开始换行，因为我将 holder 设置为 75% 宽度（100% - 25 % 为图像), 数据段落不会占据整个宽度的 50%:

我正在尝试解决这个问题（为了使 "Some Data 1" 和 "Some Data 2" 各占可用 space 的 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>

如何正确制作块浮动图像

How to make blocks floating image properly

html

css

floating

responsive-design

responsive