Aggiunta di un'immagine in un testo che utilizza la colonna

Question

Ho già provato per un paio d'ore perché non riesco a far andare la mia immagine nel mio testo. Uso le colonne per allineare il mio testo.

Immagine di ciò che ho wouldlike per ottenere

Here's what I'm constantly getting - Jsfiddle

#text-columns { 
 
    -moz-column-count: 3; 
 
    -moz-column-gap: 20px; 
 
    -webkit-column-count: 3; 
 
    -webkit-column-gap: 20px; 
 
    -moz-column-rule-color: #ccc; 
 
    -moz-column-rule-style: solid; 
 
    -moz-column-rule-width: 1px; 
 
    -webkit-column-rule-color: #ccc; 
 
    -webkit-column-rule-style: solid; 
 
    -webkit-column-rule-width: 1px; 
 
    display: inline-block; 
 
    text-align: justify; 
 
} 
 

 
#fake_image { 
 
    background-color: black; 
 
    width: 67%; 
 
    height: 100px; 
 
    float: right; 
 
}

<div> 
 

 
    <div id="fake_image"></div> 
 

 
    <p id="text-columns"> 
 
    <strong>Ihiliquatior am quia numquam ipit, quis as pro culpa nus ma doluptatem rerum veria nosae nulligendit laccatate nus dit et, cullis sum dolupta comnis apitibusam ium dem volorum repreptatque es dellique sum nat.</strong> 
 
    <br /> 
 
    <br /> In re que occum eum fugitatquati cori bea ni sequaes cum quatis del iunt fugit, omnitatus eiciis im arupid esectem vit, et repudam alitio. Ducia doluptatibus impedi deliatur res sequiam conseresto omniatiunda sit aut aligend undunt am incit aut lab 
 
    ipsuntius solore, nonectorerum quid ut repella experum que quam quam iminiscium, que inus quo in ese cum es volupti isciendit, quate consequamus et del iur, aut acersperiat utempor adis modio. Aquidem poriam, sum cullant ioribus volupit ullorianda 
 
    cum nimendist dolumqui ommolupta nus maxim estiscipsunt hari ut hil molor ariost ut ipsam sam explibus estio volorer eicabor erferum eatem aut int fugiae nimus invel etur alita illoren imporiam cum quibus is et quas et que pra desequa speriati sitassitat. 
 
    Tas desequi sapeles trumquis exceper erescilibus. Epernat assinih itatumque aliquis soluptam, volut quas nonsequias quamust reneces totatur rescidem. Viducia venimag niatusandel ipiet volectota volorit lam as a autectibus eum rem into dolore, temperferum, 
 
    sit re pero dolent intio. Equaecus dolest, secuptiur aut lanim vellectur sectia pratia pos none exeriosamus. 
 
    </p> 
 

 
</div>

Ho provato a cercare ma non sembra avere qualsiasi pagina che esistono correlato a questo problema

Grazie per il tempo

Answer 1

Se un'immagine ha un noto formato e sarà sempre essere in piedi prima e floatting destra, quindi un margine negativo di altezza dell'immagine sul :first-child dovrebbe fare:

div { 
 
    background:#FEDD31;/* demo extra */ 
 
    padding:0.5em 0.5%;/* demo extra */ 
 
    text-shadow:0 0 white/* demo extra */ 
 
} 
 
#text-columns { 
 
    -moz-column-count: 3; 
 
    -moz-column-gap: 20px; 
 
    -webkit-column-count: 3; 
 
    -webkit-column-gap: 20px; 
 
    -moz-column-rule-color: #ccc; 
 
    -moz-column-rule-style: solid; 
 
    -moz-column-rule-width: 2px; 
 
    -webkit-column-rule-color: #ccc; 
 
    -webkit-column-rule-style: solid; 
 
    -webkit-column-rule-width: 1px; 
 
    display: inline-block; 
 
    text-align: justify; 
 
    color:#0675B4;/* demo extra */ 
 
    text-shadow:1px 1px white/* demo extra */ 
 
} 
 

 
#text-columns strong:first-child { 
 
    margin:calc(-100px - 1em) 0 -1em; /* unless margins on p are reset, then no need of calc() */ 
 
    display:block; 
 
    color:purple;/* demo extra */ 
 
} 
 
#fake_image { 
 
    background-color: black; 
 
    width: 66%; 
 
    height: 100px; 
 
    float: right; 
 
    box-shadow:1px 1px 3px white, inset 1px 1px 1px white, inset 0 0 1px 10px #333/* demo extra */ 
 
}

<div> 
 
    <div id="fake_image"></div> 
 

 
    <p id="text-columns"> 
 
    <strong>Ihiliquatior am quia numquam ipit, quis as pro culpa nus ma doluptatem rerum veria nosae nulligendit laccatate nus dit et, cullis sum dolupta comnis apitibusam ium dem volorum repreptatque es dellique sum nat.</strong> 
 
    <br /> 
 
    <br /> In re que occum eum fugitatquati cori bea ni sequaes cum quatis del iunt fugit, omnitatus eiciis im arupid esectem vit, et repudam alitio. Ducia doluptatibus impedi deliatur res sequiam conseresto omniatiunda sit aut aligend undunt am incit aut lab 
 
    ipsuntius solore, nonectorerum quid ut repella experum que quam quam iminiscium, que inus quo in ese cum es volupti isciendit, quate consequamus et del iur, aut acersperiat utempor adis modio. Aquidem poriam, sum cullant ioribus volupit ullorianda 
 
    cum nimendist dolumqui ommolupta nus maxim estiscipsunt hari ut hil molor ariost ut ipsam sam explibus estio volorer eicabor erferum eatem aut int fugiae nimus invel etur alita illoren imporiam cum quibus is et quas et que pra desequa speriati sitassitat. 
 
    Tas desequi sapeles trumquis exceper erescilibus. Epernat assinih itatumque aliquis soluptam, volut quas nonsequias quamust reneces totatur rescidem. Viducia venimag niatusandel ipiet volectota volorit lam as a autectibus eum rem into dolore, temperferum, 
 
    sit re pero dolent intio. Equaecus dolest, secuptiur aut lanim vellectur sectia pratia pos none exeriosamus. 
 
    </p> 
 

 
</div>

Answer 2

ecco una soluzione con:

• posizionamento assoluto per l'immagine (anziché un galleggiante)
• superiore imbottitura #text-columns
• margine superiore negativo e allineamento verticale per .standfirst

#container { 
 
width: 100%; 
 
} 
 

 
#text-columns { 
 
    -moz-column-count: 3; 
 
    -moz-column-gap: 20px; 
 
    -webkit-column-count: 3; 
 
    -webkit-column-gap: 20px; 
 
    -moz-column-rule-color: #ccc; 
 
    -moz-column-rule-style: solid; 
 
    -moz-column-rule-width: 1px; 
 
    -webkit-column-rule-color: #ccc; 
 
    -webkit-column-rule-style: solid; 
 
    -webkit-column-rule-width: 1px; 
 
    display: inline-block; 
 
    text-align: justify; 
 
    padding-top:110px; 
 
} 
 

 
#text-columns .standfirst { 
 
position: relative; 
 
display: inline-block; 
 
margin-top: -115px; 
 
margin-bottom: 6px; 
 
vertical-align:top; 
 
font-weight:bold; 
 
} 
 

 
#fake_image { 
 
    background-color: black; 
 
    width: 67%; 
 
    height: 100px; 
 
    position:absolute; 
 
    top: 12px; 
 
    right: 0; 
 
    margin-top: 12px; 
 
}

<div id="container"> 
 
    
 
<div id="fake_image"></div> 
 
    
 
<p id="text-columns"> 
 

 
    <span class="standfirst">Ihiliquatior am quia numquam ipit, quis as pro culpa nus ma doluptatem rerum veria nosae nulligendit laccatate nus dit et, cullis sum dolupta comnis apitibusam ium dem volorum repreptatque es dellique sum nat.</span> 
 

 
In re que occum eum fugitatquati cori bea ni sequaes cum quatis del iunt fugit, omnitatus eiciis im arupid esectem vit, et repudam alitio. Ducia doluptatibus impedi deliatur res sequiam conseresto omniatiunda sit aut aligend undunt am incit aut lab 
 
    ipsuntius solore, nonectorerum quid ut repella experum que quam quam iminiscium, que inus quo in ese cum es volupti isciendit, quate consequamus et del iur, aut acersperiat utempor adis modio. Aquidem poriam, sum cullant ioribus volupit ullorianda 
 
    cum nimendist dolumqui ommolupta nus maxim estiscipsunt hari ut hil molor ariost ut ipsam sam explibus estio volorer eicabor erferum eatem aut int fugiae nimus invel etur alita illoren imporiam cum quibus is et quas et que pra desequa speriati sitassitat. 
 
    Tas desequi sapeles trumquis exceper erescilibus. Epernat assinih itatumque aliquis soluptam, volut quas nonsequias quamust reneces totatur rescidem. Viducia venimag niatusandel ipiet volectota volorit lam as a autectibus eum rem into dolore, temperferum, 
 
    sit re pero dolent intio. Equaecus dolest, secuptiur aut lanim vellectur sectia pratia pos none exeriosamus. 
 
    </p> 
 

 
</div>