Usuwanie linii podziału po IMG

Mam element img ustawiony obok elementu div. Próbowałem kilku różnych podejść, aby usunąć podział linii między tymi dwoma, ale nie odniosłem żadnego sukcesu. Wszelkie dane wejściowe będą bardzo mile widziane!Usuwanie linii podziału po IMG

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>

Źródło

2010-10-01 Feisty Mango

Co dwa elementy to dotyczy? obraz i? – Ruel

Img i div id = # starOfMonth elem. Kiedy wyświetlam podgląd w dowolnej przeglądarce, div elem znajduje się bezpośrednio pod img elem –

Add.


#newsMainBody img { 
float: left; 
} 

#startOfMonth { 
float: right; 
}

i usunąć pierwszy <br /> po <div id="starOfMonth">, jest bezużyteczny (stosowanie padding-top w css zamiast jeśli potrzebujesz trochę miejsca)

Źródło

2010-10-02 00:07:50

Zrobiłem to z pewnymi drobnymi nieprawidłowościami, takimi jak dodanie marginesu w lewo i w prawo, aby odpowiednio umieścić elementy –

Ponadto nie zrobiłem tego na elemencie newMainBody, ponieważ spowodowałoby to, że całe ciało unosiłoby się w lewo, podczas gdy ja chciałem go wyśrodkować. Więc po prostu owinąłam img w nowy znacznik div i zamiast tego przepuściłem go. Dziękuję wszystkim za ich wkład! –

Spróbuj tworzenia obrazu i div float: left; Musisz WILL musisz podać szerokość dla każdego, aby to zadziałało.

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

Następnie można napisać:

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

Źródło

2010-10-01 23:58:15 M2tM

To było pierwsze poprawne rozwiązanie opublikowane. :/ – M2tM

na założeniu, masz na myśli jednego z alt-tekście 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 */

powinna osiągnąć to, ale ja nie jestem pewien, dlaczego masz pływający <br /> wewnątrz div #starOfMonth. To może być problem.

żywo demo over at jsbin (oczywiście image s nie ładują (podane w src nie wskazuje na nic, ale powinno dać Ci poczuć, co robi moje podejście)

Źródło

2010-10-01 23:59:16

To tylko po to, aby obniżyć tekst o jedną linię dla lepszego formatowania. Spróbuję tego. –

Po pierwsze: musisz podać szerokość lub nie będzie on poprawnie pływał. Po drugie: pływający
wewnątrz elementu div nie wpłynie na sposób, w jaki znajduje się obok obrazu, doda przerwę do elementu div. Trzeci: display: block; jest niepotrzebne jako float: left; zastąpi to. W rzeczywistości IE6 czasami wymaga wyświetlania: inline; do zastosowania do elementów pływających z marginesem w celu naprawienia błędu float IE. – M2tM

Zobacz moją odpowiedź na bardziej poprawne rozwiązanie. – M2tM

Usuwanie linii podziału po IMG

Odpowiedz

Powiązane problemy