html - 两列，自动填充，第二列顶部有图像(类似杂志的布局)

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

预期结果:

(edit) 文本可以是可变长度的，但我希望布局保持不变。短文本可以停在第一列(colum-fill: auto 的作用)，但图像仍会在右侧。

Answer 1

这不是一件容易的事。不过，如果您的图像具有固定高度，您可以对其进行破解:

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>             

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

这是绝对应该更容易的事情之一。