html - 图像始终位于 2 个多列 div 中第二列的右上角

Question

我有一个 div，column-count: 2。我还有一个 img 里面。

我希望看到这张图片总是在第二列的右上角。

我怎样才能做到这一点？我知道我可以为 img 使用 position: absolute，但是文本不可见(它在图像下方)。

我也考虑过第二列的 padding-top 但据我所知这是不可能的。

我的代码:

<div style='-webkit-column-count: 2; -moz-column-count: 2; column-count: 2;'>
  <img source='http://tny.im/50D'>
  <p>Ca. 1500 words (...)</p>
</div>

预期行为:

Answer 1

您可以通过混合使用 flexbox 来实现这一点和 position :

• 设置position:relative给你的div parent 并给出padding-top (与图片相同 height )
• 包装你的img在一个元素中，可以是p与正文一致。
• 设置position:absolute与 top:0和 right:0至 img
• 将您的 1500 个单词写成一个 p
• 删除多余的padding-top , 通过添加 margin-top: (- same value as padding-top)至 p有文字。
• 设置display:flex那个p里面有文字。

最后一个与 Firefox 混淆，因此跨浏览器的可能解决方案是应用 Firefox CSS only 属性，覆盖 display:flex默认 display:block

---

适用于 Chrome、Firefox(在 Edge 中如@lexith 所述 | 在 Safari 中如@mmgross 所述)

---

注意事项:

• 避免内联样式
• 在 img属性是 src而不是 source .

div {
  position: relative;
  width: 500px;
  padding-top: 360px;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2
}
div img {
  position: absolute;
  top: 0;
  right: 0
}
div p:nth-of-type(2) {
  margin-top: -360px;
  display: flex
}
/* FF won't work 100% without this hack */

@-moz-document url-prefix() {
  div p:nth-of-type(2) {
    display: block
  }
}

<div>
  <p>
    <img src='http://tny.im/50D' />
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis commodo elit, nec feugiat tellus. Fusce sollicitudin erat quam, at gravida ligula vestibulum quis. Integer ultricies cursus velit, eu accumsan ligula facilisis quis. Sed sollicitudin et
    ante quis molestie. Suspendisse vitae cursus augue. Cras varius, neque non malesuada pharetra, purus dui sodales lectus, at rutrum dui libero sit amet risus. Maecenas id laoreet massa. Nunc sed nibh eu libero egestas dignissim sit amet eget velit.
    Ut tincidunt, tortor id malesuada elementum, massa lectus fringilla nulla, et elementum velit lacus id eros. Nulla lacinia erat eu est euismod, quis venenatis orci luctus. Nullam vel vestibulum lectus. Pellentesque habitant morbi tristique senectus
    et netus et malesuada fames ac turpis egestas. Curabitur finibus blandit nisl vitae rutrum. Morbi laoreet lacus enim, a iaculis dui scelerisque non. Pellentesque vulputate ut tortor vel iaculis. In eu lacus condimentum, semper felis ut, pellentesque
    ligula. Nullam vestibulum ligula sit amet elit imperdiet, et feugiat lorem pharetra. Donec vel eros vestibulum, fermentum odio sit amet, rutrum justo. Integer finibus at tellus bibendum eleifend. Nullam rhoncus aliquet purus, in maximus nulla dignissim
    eget. Phasellus dignissim lacus in auctor viverra. Integer sed eros dolor. Fusce varius eros ac ante tincidunt molestie vitae ac leo. Sed vulputate finibus enim in auctor. In elit velit, elementum ut condimentum ac, suscipit nec libero. Suspendisse
    non dui molestie mi fringilla imperdiet a eget elit. Maecenas semper, metus at vulputate vestibulum, nulla odio ullamcorper leo, vitae sodales sapien eros id ex. Mauris consectetur fermentum sem. Pellentesque aliquam, justo at fermentum consequat,
    diam sapien dictum lacus, eget gravida nisl neque eget urna. Praesent maximus molestie neque, ut feugiat mauris fringilla ut. Quisque sed cursus massa. Praesent tincidunt risus eros, a elementum sapien vestibulum sit amet. Suspendisse potenti. Donec
    dignissim aliquam metus, id tristique metus hendrerit a. Vivamus semper ante sed erat aliquam, sed faucibus libero mollis. Proin ultricies enim at felis ultrices pharetra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent facilisis
    magna vitae lorem congue, eu bibendum lectus auctor. Etiam nec ex eget dui aliquet consequat. Aenean sed lectus laoreet, lobortis nisi sed, ullamcorper sem. Morbi non blandit arcu. Curabitur libero nisl, convallis at magna sit amet, ornare egestas
    nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis sit amet risus pulvinar, maximus ex at, rhoncus nulla. Praesent vel finibus diam, eu rutrum risus. Nulla gravida pulvinar lacinia. Phasellus erat nunc,
    luctus id fringilla gravida, venenatis dignissim augue. Aliquam enim ante, cursus vel sem vel, vehicula posuere leo. Maecenas purus quam, lacinia ut diam ac, bibendum gravida leo. Quisque sollicitudin purus et mollis tincidunt. Ut condimentum eros
    id pellentesque elementum. Integer in tellus pulvinar, convallis lectus nec, ultrices est. Sed scelerisque aliquet pretium. Duis tempor, quam auctor lacinia semper, dolor turpis posuere ligula, id feugiat ex mi cursus tellus. Class aptent taciti sociosqu
    ad litora torquent per conubia nostra, per inceptos himenaeos. Duis ultrices porta turpis, id egestas turpis rhoncus et. Proin vel pharetra mauris, vel hendrerit nisl. Ut cursus odio eu scelerisque aliquam. Sed vel velit pellentesque, varius ligula
    gravida, semper purus. Nam a risus cursus, gravida lacus a, pellentesque mauris. Sed ullamcorper nec elit eu interdum. Aliquam tortor quam, iaculis vitae finibus vitae, varius ut turpis. Sed iaculis dignissim mauris, id cursus dolor commodo dapibus.
    In dignissim eget diam sed condimentum. Praesent nec lectus nec nisi vehicula convallis. In sagittis magna at diam aliquam, ut ultricies odio molestie. Duis viverra eleifend sollicitudin. Sed vel velit turpis. Curabitur non facilisis felis. Nunc vitae
    lacinia elit. Aliquam fringilla bibendum ipsum, vel posuere mi tincidunt id. In vulputate, diam non aliquam congue, mi mi condimentum leo, id ultricies lacus odio nec metus. Ut euismod nisi tellus, at congue magna blandit vitae. Phasellus iaculis
    dolor ornare leo eleifend molestie. Morbi lorem sem, pretium vitae tincidunt eget, vulputate sit amet turpis. Praesent sagittis dignissim suscipit. Nulla maximus elit sed felis interdum consequat eget id dui. Aliquam mollis semper lobortis. Aliquam
    porta eu est vitae vehicula. Maecenas pretium tincidunt ipsum non vestibulum. Nullam vitae nibh diam. Nam efficitur bibendum nibh, et scelerisque libero tempus quis. Nam ac finibus lectus, non dictum diam. Morbi vel rutrum turpis, in tempor risus.
    Aliquam consequat lectus sed nisi consectetur, ut imperdiet lacus consequat. Nam ut luctus lectus. Nulla arcu neque, dapibus faucibus velit ac, ultricies tincidunt enim. Donec vitae tristique odio. Quisque vel congue nunc. Maecenas lacinia arcu in
    justo semper, ut dictum elit mollis. Morbi ut enim metus. Pellentesque ullamcorper, metus ut tristique rhoncus, lacus eros eleifend lacus, eget ultricies urna lorem at orci. Aenean et lobortis lectus. Nullam malesuada dui mi, ut congue lorem tincidunt
    id. Maecenas fringilla ante ut iaculis aliquet. Praesent lacinia arcu id lorem ultrices, posuere pharetra lorem imperdiet. Phasellus in viverra leo. Interdum et malesuada fames ac ante ipsum primis in faucibus. In volutpat ligula non pretium scelerisque.
    Praesent at tellus nunc. Aliquam pulvinar, tortor vitae tincidunt tincidunt, urna nibh facilisis elit, et commodo mauris magna ac augue. Phasellus et elit sed turpis volutpat laoreet ut ut enim. Duis a turpis leo. Etiam suscipit nec risus ac ultricies.
    Vivamus eu erat luctus, fringilla purus ut, elementum tortor. Nulla ullamcorper lectus vitae risus porta volutpat. Curabitur vestibulum sit amet dolor sed laoreet. Suspendisse consectetur ultrices mauris non pellentesque. Aenean ipsum mi, tincidunt
    nec nibh sed, pharetra lacinia mi. Donec condimentum tincidunt ligula et efficitur. Integer vitae porta enim, sit amet mattis magna. Nam vitae bibendum lectus. Proin rhoncus tortor felis, at egestas mauris lobortis vitae. Morbi ullamcorper sem non
    augue venenatis finibus. In facilisis justo eu leo suscipit, sed tempor justo tempor. Mauris magna nisi, auctor at turpis a, feugiat porta leo. Sed vestibulum, neque in malesuada molestie, orci erat suscipit sem, euismod finibus est sapien eu nulla.
    Nam maximus rhoncus venenatis. Nullam hendrerit, lacus et congue commodo, nibh massa interdum mauris, eget accumsan nisi nulla quis tellus. Vestibulum vel viverra sapien, ut tempor eros. Morbi euismod scelerisque posuere. Fusce imperdiet, est a consequat
    fermentum, tortor quam ullamcorper ligula, consequat luctus augue risus in eros. Vestibulum urna lorem, scelerisque id urna at, rutrum imperdiet ipsum. Quisque nec scelerisque ipsum. Vestibulum est felis, vehicula ut augue ac, elementum tempor quam.
    Morbi tempor accumsan est in volutpat. In tempor lacus augue. Nullam gravida tortor sit amet est ullamcorper, ornare viverra arcu egestas. Suspendisse accumsan nibh quam, scelerisque tempor augue aliquam ac. Aliquam ut lorem tempor mauris maximus
    aliquet. Curabitur vehicula arcu ac lorem elementum, eu laoreet odio suscipit. Nullam mattis dui at lorem egestas fermentum. Sed faucibus gravida erat, sit amet egestas enim faucibus ac. Etiam at condimentum velit. Donec quis dolor ut nibh dictum
    pellentesque. Maecenas sagittis eget nisl eu posuere. Cras tincidunt leo sed mi aliquet lacinia. Quisque egestas dictum nisi. Maecenas lobortis pellentesque feugiat. Sed ut accumsan felis. Ut eget diam at ante ultrices accumsan. Cras in odio lacinia,
    interdum sem vitae, efficitur ipsum. Nam porttitor at lacus tempor auctor. Aenean auctor, diam vulputate semper bibendum, felis nulla dapibus mi, sit amet fermentum erat massa sit amet sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus.
    Maecenas at congue sem. Nullam gravida ultrices interdum. Aenean nulla enim, consectetur sit amet hendrerit a, varius non est. Maecenas commodo diam diam, vitae molestie lacus ullamcorper a. Vivamus dapibus mi vitae nisl feugiat, ac feugiat lectus
    faucibus. Praesent facilisis nisl sit amet viverra fringilla. Morbi posuere velit venenatis velit maximus, et laoreet ex varius. Curabitur ut quam non neque egestas molestie. Donec ut purus eget urna viverra ullamcorper id a justo. Nam porta euismod
    lectus, a aliquam turpis sollicitudin et. Morbi dignissim metus nec enim varius, quis ornare ex viverra. Phasellus imperdiet nisl non luctus malesuada. Nulla dapibus finibus faucibus. Donec mi massa, maximus a ante ut, tincidunt pharetra mi. Quisque
    ultrices sit amet velit eu convallis. Nunc porta tellus sed augue ornare, vel porttitor tortor semper. Morbi id malesuada nisi. Pellentesque euismod nisl vel orci ornare aliquam. Integer sit amet ex rutrum, bibendum eros nec, mollis libero. Aliquam
    eget ex a ligula sodales convallis ut non tellus. Nunc felis mi, tincidunt eu mattis eget, congue a lectus. Donec commodo turpis turpis, non tempus est eleifend vel. Fusce ut congue mauris. Etiam lacinia elit quam, in feugiat dolor porta vitae. Sed
    laoreet sed metus eget hendrerit. Phasellus pharetra magna ac molestie volutpat. Phasellus eget tincidunt velit. Suspendisse finibus, est volutpat convallis bibendum, mi erat ornare tellus, ac rhoncus ligula felis vel mi. Maecenas nec risus turpis.
    Pellentesque congue, orci ac commodo mattis, risus lectus ornare metus, vitae lobortis est orci id lorem. Nullam lobortis in justo eget commodo. Nunc non aliquam elit, ut euismod augue. Fusce faucibus felis at erat accumsan vestibulum. Aliquam ultricies
    elit nec nibh blandit, sed vehicula libero porttitor. Nulla volutpat varius mauris suscipit pellentesque. Sed arcu ipsum, consequat et eros vel, fermentum pharetra felis. Aliquam feugiat vehicula congue. Cum sociis natoque penatibus et magnis dis
    parturient montes, nascetur ridiculus mus. Cras sed iaculis nibh, nec auctor nibh. Vestibulum vitae auctor tortor, eu accumsan odio. Aliquam quis pellentesque.</p>
</div>