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

我以两列布局显示文本，带有

列计数

和

列填充：自动

，这样它在进入第二列之前会完全填充第一列

我还需要在右上角（第二列的顶部）添加一个插图。使用

位置：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;
}

长文本
梅因先生{
边缘顶部：2厘米；
填料：0.1cm 0.1cm；
列数：2；
柱间距：2米；
列填充：自动；
文本对齐：对齐；
}
.产品名称{
颜色：耐火砖；
填料：2厘米1厘米0厘米1厘米；
}
插图{
边缘顶部：0.1cm；
左边距：自动；
右边距：自动；
显示：块；
最大高度：5厘米；
最大宽度：11cm；
边框：实心0.04cm；
边框颜色：耐火砖；
}

预期结果：

---

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

您不能这样构造html吗？确保图像相对位于div内部

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

长文本
更多文本

---

编辑：如果这对你不起作用，那么在我看来，你需要决定你的图像将永远在哪里，例如，总是用图像和文本打开你的文章，然后你可以根据需要定位，或者采用一些广泛不受支持的解决方案，例如regions（）。

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

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

长文本
更多文本

---

编辑：如果这对你不起作用，那么在我看来，你需要决定你的图像将永远在哪里，例如，总是用图像和文本打开你的文章，然后你可以根据需要定位，或者采用一些广泛不受支持的解决方案，如regions（）。

这根本不是一项容易的任务。如果你的图像有一个固定的高度，你可以对它进行分类：

div{
最大宽度：420px；
列数：2；
柱间距：20px；
位置：相对位置；
填充顶部：150px；
}
部门经理{
位置：绝对位置；
排名：0；
右：0；
高度：150像素；
宽度：200px；
}
p组：第一类{
利润上限：-150px；
}

Lorem ipsum dolor，坐在amet Concertetur Adipising Elite的位子上。这是一个很好的例子。如果一个人的生活质量不高，那么他就必须承认自己所犯的错误，而不是阻碍自己的行为，因为他是一名优秀的公民。这是一个很好的例子。你认为你的错误是什么

Lorem ipsum dolor，坐在amet Concertetur Adipising Elite的位子上。这是一个很好的例子。你认为你的错误是什么

Lorem ipsum dolor，坐在amet Concertetur Adipising Elite的位子上。这是一个很好的例子。你认为你的错误是什么

一点也不容易。如果你的图像有一个固定的高度，你可以对它进行分类：

div{
最大宽度：420px；
列数：2；
柱间距：20px；
位置：相对位置；
填充顶部：150px；
}
部门经理{
位置：绝对位置；
排名：0；
右：0；
高度：150像素；
宽度：200px；
}
p组：第一类{
利润上限：-150px；
}

Lorem ipsum dolor，坐在amet Concertetur Adipising Elite的位子上。这是一个很好的例子。如果一个人的生活质量不高，那么他就必须承认自己所犯的错误，而不是阻碍自己的行为，因为他是一名优秀的公民。这是一个很好的例子。你认为你的错误是什么

Lorem ipsum dolor，坐在amet Concertetur Adipising Elite的位子上。这是一个很好的例子。你认为你的错误是什么

Lorem ipsum dolor，坐在amet Concertetur Adipising Elite的位子上。这是一个很好的例子。你认为你的错误是什么

您查看过CSS网格吗？您还希望第二列中的文本不换行，而只是放在图像下面吗？这不会破坏可读性吗？您的列宽和列数是固定的，还是可变的？就我所知（bootstrap的网格体验），我不知道CSS网格如何允许在列之间分发文本。什么会破坏可读性？图像通常会占据所有宽度，我们在报纸上已经习惯了这种处理方式。@Facundocoradini嗯，这是非常固定的，我需要两列，它们的宽度应该相同，文本不同。当没有足够的文本时，它可以停在第1列中。您查看过CSS网格吗？您还希望第二列中的文本不换行，而只是放在图像下面吗？这不会破坏可读性吗？您的列宽和列数是固定的，还是可变的？就我所知（bootstrap的网格体验），我不知道CSS网格如何允许在列之间分发文本。什么会破坏可读性？图像通常会占据所有宽度，我们已经习惯了报纸上的这种处理方式。@facundocoradini嗯，这是公关