两列，自动填充，第二列顶部有图像（杂志状布局）

Question

我使用column-count和column-fill: auto以两列布局显示文字，以便在转到第二列之前完全填充第一列。

我还需要在右上角添加插图（第二列的顶部）。使用position: fixed时，文本不会环绕图像，但会隐藏在图像下方。我尝试float组合但没有成功。

你会怎么做？谢谢！

<div class="main">
    <div class="description">
      <div>
        longish text
      </div>

      <figure>
        <img class="illustration"
            src="data:image:{{ p.id }}">
      </figure>

    </div>
  </div>





.main {
  margin-top: 2cm;
  padding: 0 1cm 0cm 1cm;
  column-count: 2;
  column-gap: 2em;
  column-fill: auto;
  text-align: justify;
}

.produit-title {
    color: firebrick;
    padding: 2cm 1cm 0cm 1cm;
}

img.illustration {
  margin-top: 0.1cm;
  margin-left: auto;
  margin-right: auto;
  display: block;
  max-height: 5cm;
  max-width: 11cm;
  border: solid 0.04cm;
  border-color: firebrick;
}

预期结果：

（编辑）文本可以是可变长度，但我希望布局保持不变。短文可以在第一列（colum-fill: auto的作用）停止，但图像仍然在右侧。

Answer 1

你不能像这样构建html吗？确保图像相对位于div内？

<div class="main">
    <div class="description">
        <div>
            longish text
            <img class="illustration" src="data:image:{{ p.id }}">
            more text
        </div>
    </div>
</div>

编辑：如果这不适合你，那么在我看来你需要决定你的图像总是在哪里，例如总是用图片后跟文本打开你的文章然后你可以根据需要定位，或采用一些广泛不支持的解决方案，如区域（https://www.html5rocks.com/en/tutorials/regions/adobe/）。

Answer 2

根本不是一件容易的事。你可以破解它，如果你的图像有一个固定的高度：

div {
  max-width:420px;
  column-count: 2;
  column-gap: 20px;
  position: relative;
  padding-top: 150px;
}

div img {
  position: absolute;
  top: 0;
  right: 0;
  height: 150px;
  width: 200px;
}

div p:first-of-type {
  margin-top: -150px;
}

<div>
<img src="http://via.placeholder.com/200x150px">

<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?orem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Porro id sequi rem aspernatur dolore expedita quia. Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit?</p>
 </div>             

诀窍是将图像绝对定位在容器中，然后通过在容器上设置正填充和第一个paragrash上的负边距来拉回文本，两者都与图像高度相等。

这是肯定应该更容易的事情之一。