immagine sempre nell'angolo in alto a destra della seconda colonna in 2 div multi-colonne

Question

Ho uncon column-count: 2. Ho anche un img all'interno di esso.

Mi piacerebbe vedere questa immagine sempre nell'angolo in alto a destra della seconda colonna.

Come posso ottenere questo risultato? So che posso usare position: absolute per il img, ma poi il testo non è visibile (è sotto l'immagine).

Ho pensato anche a padding-top della seconda colonna ma da quello che so questo non è possibile.

Il mio codice:

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

Comportamento previsto:

Answer 1

È possibile raggiungere questo obiettivo con un mix di flexbox e position:

• impostato position:relative al vostro div genitore e dare il padding-top (come nell'immagine height)
• avvolgere il proprio img in un elemento, può essere p uguale al testo.
• set position:absolute con top:0 e right:0-img
• mettere le 1500 parole in un unico p
• rimuovere l'extra padding-top, con l'aggiunta di margin-top: (- same value as padding-top)-p che ha il testo.
• impostare display:flex a quello p che contiene il testo.

Quest'ultimo, pasticci con Firefox, quindi una possibile soluzione per essere cross browser è applicare un Firefox CSS unica proprietà, sovrascrivendo il display:flex con il default display:block

---

Lavori in Chrome, Firefox (in Edge come @lexith menzionato | in Safari come @mmgross menzionato)

---

Note:

• stili Evitare linea
• Nel img l'attributo èsrc e non 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>

Answer 2

N.B. La soluzione descritta di seguito funziona solo sulle versioni correnti di Firefox, Safari e Edge.

Se si conosce l'altezza dell'immagine che si può dare al <div> un padding-top uguale (o leggermente superiore), che in altezza.

Poi, si può dare il primo paragrafo nel <div> negativo margin-top, pari al padding-top, avete appena applicato alla <div>.

Ciò significa che la prima colonna di testo inizia nella parte superiore dello <div> e la seconda colonna di testo inizia appena sotto lo <img> in posizione assoluta.

Esempio:

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(1) { 
 
margin-top:-360px; 
 
}

<div> 
 
<img src="http://tny.im/50D" alt="La Joconde"> 
 
<p>Lorem ipsum dolor sit amet, magna errem animal vim ad, ne qui commune gubergren. Ut pro blandit mentitum, mel ludus quaerendum ex, eum in mundi iisque appareat. Assum dolorem iracundia ex sea, te nonumes signiferumque vel, prima illud prompta mel et. Ut eos agam dicat timeam. Quo ad volumus perfecto conclusionemque.</p> 
 
<p>Ceteros civibus at vix, tibique gloriatur ad his. Exerci iuvaret te eos. Cu vix fabulas atomorum. Eam ne tempor fastidii partiendo, novum volumus honestatis ius no, vim denique expetenda te. Mazim incorrupte adversarium mei ex, sea dolor graeco ut, vel et quidam equidem tibique.</p> 
 
<p>Has in falli accusata. Est rebum viris omnium no, cu tritani dolorum sed, zril liberavisse nec no. Ei sea nullam ridens perfecto, posse minimum ut eam. Sit audiam graecis deleniti te. Graece saperet aliquando at his, bonorum ceteros deterruisset eu pri. Id nam dicat diceret delicata, ea mei novum evertitur.</p> 
 
<p>Cu odio mediocrem dissentiet has, ei his autem audire voluptaria. Antiopam volutpat et has, nec tale scripta prodesset ex. Eu qui omittam singulis petentium, ne soluta salutandi duo. Sed nullam ocurreret signiferumque ex, mel an audire corrumpit. Ut sonet vocent consectetuer mel, ea oportere sententiae eos, ea ponderum tacimates ius. Libris legimus vis ad.</p> 
 
<p>His eu viris atomorum. Duo magna mutat erroribus te. Eu noluisse repudiare democritum vel, mea eu quando aliquip consulatu. Brute nostrum splendide et vis. Eu eos erant homero postea, elitr oratio eu vis.</p> 
 

 
<p>Lorem ipsum dolor sit amet, magna errem animal vim ad, ne qui commune gubergren. Ut pro blandit mentitum, mel ludus quaerendum ex, eum in mundi iisque appareat. Assum dolorem iracundia ex sea, te nonumes signiferumque vel, prima illud prompta mel et. Ut eos agam dicat timeam. Quo ad volumus perfecto conclusionemque.</p> 
 
<p>Ceteros civibus at vix, tibique gloriatur ad his. Exerci iuvaret te eos. Cu vix fabulas atomorum. Eam ne tempor fastidii partiendo, novum volumus honestatis ius no, vim denique expetenda te. Mazim incorrupte adversarium mei ex, sea dolor graeco ut, vel et quidam equidem tibique.</p> 
 
<p>Has in falli accusata. Est rebum viris omnium no, cu tritani dolorum sed, zril liberavisse nec no. Ei sea nullam ridens perfecto, posse minimum ut eam. Sit audiam graecis deleniti te. Graece saperet aliquando at his, bonorum ceteros deterruisset eu pri. Id nam dicat diceret delicata, ea mei novum evertitur.</p> 
 
<p>Cu odio mediocrem dissentiet has, ei his autem audire voluptaria. Antiopam volutpat et has, nec tale scripta prodesset ex. Eu qui omittam singulis petentium, ne soluta salutandi duo. Sed nullam ocurreret signiferumque ex, mel an audire corrumpit. Ut sonet vocent consectetuer mel, ea oportere sententiae eos, ea ponderum tacimates ius. Libris legimus vis ad.</p> 
 
<p>His eu viris atomorum. Duo magna mutat erroribus te. Eu noluisse repudiare democritum vel, mea eu quando aliquip consulatu. Brute nostrum splendide et vis. Eu eos erant homero postea, elitr oratio eu vis.</p> 
 

 
<p>Lorem ipsum dolor sit amet, magna errem animal vim ad, ne qui commune gubergren. Ut pro blandit mentitum, mel ludus quaerendum ex, eum in mundi iisque appareat. Assum dolorem iracundia ex sea, te nonumes signiferumque vel, prima illud prompta mel et. Ut eos agam dicat timeam. Quo ad volumus perfecto conclusionemque.</p> 
 
<p>Ceteros civibus at vix, tibique gloriatur ad his. Exerci iuvaret te eos. Cu vix fabulas atomorum. Eam ne tempor fastidii partiendo, novum volumus honestatis ius no, vim denique expetenda te. Mazim incorrupte adversarium mei ex, sea dolor graeco ut, vel et quidam equidem tibique.</p> 
 
<p>Has in falli accusata. Est rebum viris omnium no, cu tritani dolorum sed, zril liberavisse nec no. Ei sea nullam ridens perfecto, posse minimum ut eam. Sit audiam graecis deleniti te. Graece saperet aliquando at his, bonorum ceteros deterruisset eu pri. Id nam dicat diceret delicata, ea mei novum evertitur.</p> 
 
<p>Cu odio mediocrem dissentiet has, ei his autem audire voluptaria. Antiopam volutpat et has, nec tale scripta prodesset ex. Eu qui omittam singulis petentium, ne soluta salutandi duo. Sed nullam ocurreret signiferumque ex, mel an audire corrumpit. Ut sonet vocent consectetuer mel, ea oportere sententiae eos, ea ponderum tacimates ius. Libris legimus vis ad.</p> 
 
<p>His eu viris atomorum. Duo magna mutat erroribus te. Eu noluisse repudiare democritum vel, mea eu quando aliquip consulatu. Brute nostrum splendide et vis. Eu eos erant homero postea, elitr oratio eu vis.</p> 
 

 
<p>Lorem ipsum dolor sit amet, magna errem animal vim ad, ne qui commune gubergren. Ut pro blandit mentitum, mel ludus quaerendum ex, eum in mundi iisque appareat. Assum dolorem iracundia ex sea, te nonumes signiferumque vel, prima illud prompta mel et. Ut eos agam dicat timeam. Quo ad volumus perfecto conclusionemque.</p> 
 
<p>Ceteros civibus at vix, tibique gloriatur ad his. Exerci iuvaret te eos. Cu vix fabulas atomorum. Eam ne tempor fastidii partiendo, novum volumus honestatis ius no, vim denique expetenda te. Mazim incorrupte adversarium mei ex, sea dolor graeco ut, vel et quidam equidem tibique.</p> 
 
<p>Has in falli accusata. Est rebum viris omnium no, cu tritani dolorum sed, zril liberavisse nec no. Ei sea nullam ridens perfecto, posse minimum ut eam. Sit audiam graecis deleniti te. Graece saperet aliquando at his, bonorum ceteros deterruisset eu pri. Id nam dicat diceret delicata, ea mei novum evertitur.</p> 
 
<p>Cu odio mediocrem dissentiet has, ei his autem audire voluptaria. Antiopam volutpat et has, nec tale scripta prodesset ex. Eu qui omittam singulis petentium, ne soluta salutandi duo. Sed nullam ocurreret signiferumque ex, mel an audire corrumpit. Ut sonet vocent consectetuer mel, ea oportere sententiae eos, ea ponderum tacimates ius. Libris legimus vis ad.</p> 
 
<p>His eu viris atomorum. Duo magna mutat erroribus te. Eu noluisse repudiare democritum vel, mea eu quando aliquip consulatu. Brute nostrum splendide et vis. Eu eos erant homero postea, elitr oratio eu vis.</p> 
 
</div>