Rimuovere un interruzione di riga dopo IMG

Question

Ho un elemento img impostato accanto a un div. Ho provato un paio di approcci diversi per rimuovere il linebreak che si sta verificando tra i due ma non hanno avuto alcun successo. Qualsiasi input sarebbe molto apprezzato!

CSS

#newsMainBody 
{ 
margin-right: auto; 
margin-left: auto; 
background:#61bc49; 
width: 750px; 
height: 900px; 
font-family:"sans-serif"; 
text-align:left; 
-moz-border-radius: 10px;/*mozilla*/ 
z-index: 1; 
white-space: nowrap; 
} 

#starOfMonth 
{ 
background: #ffff99; 
width: 275px; 
height: 300px; 
text-align: center; 
font-family:"sans-serif"; 
white-space: normal; 
} 

HTML

<div id="newsMainBody"> 
    <img src="img/farm.jpg" alt="Farm photo" /> 
    <div id="starOfMonth"> 
     <br /> 
     <font style="font-weight:bold;font-size:medium; color:Purple;">DooLittle Farms Childcare</font><br /> 
     <font style="font-size:small;">"We're Growing Great Kids"</font><br /> 
     <img id="starImg" src="img/gold-star.jpg" alt="Star of the Week" width="200" height="200"/><br /> 
     Our Star Of The Week! 
    </div> 
</div> 

Answer 1

Add:.

#newsMainBody img { 
float: left; 
} 

#startOfMonth { 
float: right; 
} 
 

e rimuovere il primo <br /> dopo <div id="starOfMonth">, è inutile (uso padding-top in css, invece, se avete bisogno di un pò di spazio)

Answer 2

Prova a fare l'immagine e il galleggiante div: left; È necessario fornire una larghezza per ciascuno per fare questo lavoro.

#starOfMonth 
{ 
background: #ffff99; 
float: left; 
width: 275px; 
height: 300px; 
text-align: center; 
font-family:"sans-serif"; 
white-space: normal; 
} 

#starOfMonthImage { 
height:275px; /*Optional, but it's a good idea to supply height for images so that the browser doesn't shift things around during the loading process*/ 
width:475px; /*OR SOMETHING! Make it narrower if it isn't working, I haven't been super careful about reading your padding in depth so this may be wrong.*/ 
float:left; 
} 

Poi si può scrivere:

<div id="newsMainBody"> 
    <img src="img/farm.jpg" alt="Farm photo" id="starOfMonthImage" /> 
    <div id="starOfMonth"> 
     <br /> 
     <font style="font-weight:bold;font-size:medium; color:Purple;">DooLittle Farms Childcare</font><br /> 
     <font style="font-size:small;">"We're Growing Great Kids"</font><br /> 
     <img id="starImg" src="img/gold-star.jpg" alt="Star of the Week" width="200" height="200"/><br /> 
     Our Star Of The Week! 
    </div> 
</div> 

Answer 3

Partendo dal presupposto ti riferisci a quello con l'alt-testo del Farm photo:

div#newsMainBody > img { 
/*  display: block; commented out as per @M2tM's comment, below */ 
    float: left; 
    width: 200px; 
} 
#starOfMonth { 
    margin-left: 200px; /* or 'width of floated image' + 'a margin of 10px' 
}      /* or whatever, just so they're not physically touching */ 

dovrebbe realizzare questo, ma io Non sono sicuro del fatto che tu abbia un <br /> galleggiante all'interno del div #starOfMonth. Questo potrebbe essere un problema.

Demo online, over at jsbin (ovviamente i image s non vengono caricate (data la src non punta a nulla, ma dovrebbe darvi un'idea di ciò che il mio approccio fa)