Eliminar un salto de línea después de IMG

Tengo un elemento img establecido junto a un div. He intentado un par de enfoques diferentes para eliminar el salto de línea que está ocurriendo entre los dos, pero no he tenido éxito. ¡Cualquier contribución será muy apreciada!Eliminar un salto de línea después de 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>

Fuente

2010-10-01 Feisty Mango

¿Qué dos elementos se refiere? la imagen y? – Ruel

El img y el div id = # starOfMonth elem. Cuando obtengo una vista previa en cualquier navegador, el elemento div está directamente debajo del img elem –

Añadir:.


#newsMainBody img { 
float: left; 
} 

#startOfMonth { 
float: right; 
}

y retirar la primera <br /> después <div id="starOfMonth">, es inútil (uso padding-top en css lugar si se necesita un poco de espacio)

Fuente

2010-10-02 00:07:50

Esto sirvió para algunos pequeños ajustes como agregar un margen a la izquierda y a la derecha para espaciar correctamente los elementos –

Además, no lo hice con el nuevo elemPrincipal porque eso haría que todo el cuerpo flote hacia la izquierda mientras que yo quería que se centrara. Así que simplemente envolví el img en una nueva etiqueta div y floté en su lugar. ¡Gracias a todos por su entrada! –

Trate de hacer la imagen y el flotador div: left; Usted WILL necesita proporcionar un ancho para cada uno para hacer este trabajo.

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

A continuación, se puede escribir:

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

Fuente

2010-10-01 23:58:15 M2tM

Esta fue la primera solución correcta publicada. :/ – M2tM

En el supuesto de que usted se refiere a la que tiene el texto alternativo de 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 */

En caso de lograrlo, pero No estoy seguro de por qué tienes un <br /> flotante dentro de la div #starOfMonth. Eso podría ser un problema.

Demostración en directo, over at jsbin (obviamente los image s no se cargan (dada la src no está apuntando a algo, pero deben darle una idea de lo que hace mi enfoque)

Fuente

2010-10-01 23:59:16

Eso es solo para bajar el texto una línea para un mejor formateo. Voy a intentarlo –

Primero: necesitas especificar un ancho o no flotará correctamente. Segundo: el
flotante dentro del div no afectará la forma en que se establece al lado de la imagen, sino que agregará un descanso dentro del div. Tercero: pantalla: bloque; es innecesario como float: izquierda; anulará esto. De hecho, IE6 a veces requiere visualización: en línea; para ser aplicado a elementos flotantes con un margen para arreglar el error de float IE. – M2tM

Vea mi respuesta para una solución más correcta. – M2tM

Eliminar un salto de línea después de IMG

Respuesta

Cuestiones relacionadas