Entfernen Sie einen Zeilenumbruch nach IMG

Question

Ich habe ein Img-Element neben einem div. Ich habe ein paar verschiedene Ansätze ausprobiert, um den Zeilenumbruch zu entfernen, der zwischen den beiden auftritt, aber keinen Erfolg hatte. Jede Eingabe würde sehr geschätzt werden!

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

Anzahl:.

#newsMainBody img { 
float: left; 
} 

#startOfMonth { 
float: right; 
} 
 

und entfernen Sie die erste <br /> nach <div id="starOfMonth">, es ist nutzlos (Verwendung padding-top in CSS statt, wenn Sie etwas Platz benötigen)

Answer 2

Versuchen Sie, das Bild und die div float: left; Sie WILL müssen eine Breite für jeden zur Verfügung stellen, damit dies funktioniert.

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

Dann können Sie schreiben:

<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

Unter der Annahme, Sie mit dem Alt-Text von Farm photo auf den einen Bezug:

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

dies erreichen sollte, aber ich bin mir nicht sicher, warum du eine schwimmende <br /> innerhalb der #starOfMonth div. hast. Das könnte ein Problem sein.

Live-Demo, over at jsbin (natürlich die image s nicht geladen (bei der src nicht auf etwas zeigen, aber es sollte Ihnen ein Gefühl geben für das, was mein Ansatz der Fall ist)