两列，自动填充，第二列顶部有一个图像(类似杂志的布局) [英] Two columns, auto filled, with an image on top of the second column (magazine-like layout)

问题描述

我以两列布局显示文本，使用 column-count 和 column-fill: auto 以便它在进入第二列之前完全填充第一列.

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

你会如何处理这个问题?谢谢！

<div class="描述"><div>冗长的文字
<图><img class="插图"src="data:image:{{ p.id }}"></图>

.主要的 {边距:2cm；填充:0 1cm 0cm 1cm；列数:2；列距:2em；列填充:自动；文本对齐:对齐；}.产品标题{颜色:耐火砖；衬垫:2cm 1cm 0cm 1cm；}img.illustration {边距顶部:0.1cm；左边距:自动；右边距:自动；显示:块；最大高度:5cm；最大宽度:11cm；边框:实心0.04cm；边框颜色:耐火砖；}

预期结果:

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

解决方案

根本不是一件容易的事.不过，您可以对其进行修改，如果您的图片具有固定高度:

div {最大宽度:420px；列数:2；列间距:20px；位置:相对；填充顶部:150px；}div 图像 {位置:绝对；顶部:0；右:0；高度:150px；宽度:200px；}div p:第一个类型{边距顶部:-150px；}

<img src="http://via.placeholder.com/200x150px"><p>Lorem ipsum dolor，坐享其成.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，坐享其成.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，坐享其成.Porro id sequi rem aspernatur dolore expedita quia.Atque amet enim aliquid rem eligendi quibusdam rerum, consequuntur tenetur eum, error vero impedit? </p>

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

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

I displayed text in a two columns layout, with column-count and column-fill: auto so that it fills completely the first column before going to the second.

I also need to add an illustration at the top right (top of the second column). With a position: fixed, the text won't wrap around the image but will hide underneath it. I tried float combinations with no success.

How would you approach this ? Thanks !

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

expected result:

(edit) the text can be of variable length, but I would like the layout to stay the same. A short text can stop at the first column (role of colum-fill: auto), but the image would still be on the right.

解决方案

Not an easy task at all. You can sort of hack it though, if your images have a fixed height:

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>             

The trick is to absolute position the image in the container then pull the text back up by setting a positive padding on the container and negative margin on the first paragrash, both equal number to the image height.

This is one of those things that definitely should be easier.

这篇关于两列，自动填充，第二列顶部有一个图像(类似杂志的布局)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！