如何使块正确浮动图像

Question

这是我的代码：

＆＃13;

＆＃13;

    .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%;
    }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

我正在努力解决这个问题（制作＆＃34;某些数据1＆＃34;和＃34;某些数据2＆＃34;每个可用空间占50％ - 图片1是正确，图像2不是）但无法找到方法。请帮帮我。我需要纯CSS解决方案。

Answer 1

除非修复了html，否则这应该有用吗？将图像放入容器中，然后使用flexbox在文本下方执行两个列。

getFilesDir()

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

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

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

.data {
  width: 50%;
}