Buenas, soy nuevo por aquí y por el diseño de webs, tengo un pequeño problema y no encuentro la manera de solucionarlo, lo mas probable es que sea una tontería de nada :-\
Pongo el código y ahora me explico:
<html>
<style>
img{
widht:100px;
height:100px;
}
div#fondo{
margin:auto;
margin-top:5px;
width:465px;
height:auto;
background-color:yellow;
}
div#abc{
margin-left:10px;
float:null;
}
</style>
<div id="fondo">
<div id="abc">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
</div>
</div>
</html>
La cosa es que todo sale bien, las imágenes pequeñitas, en fila y columnas y el fondo amarillo, pero el problema viene cuando quiero cambiar el valor de "float:null;" a "float:left;", al hacer esto, el fondo amarillo desaparece por completo, y necesito que esté en left y se vea el fondo amarillo, para otro código diferente a este.
PD: Poniendo el "height" del "div#fondo" en cualquier numero se ve, pero necesito que sea "auto", ya que a veces habrá mas imágenes y otras veces habrá menos.
Espero que me podáis ayudar.
Saludos. ;D
De verdad no entiendo que cosa quieres hacer especificamente con tu diseño, pero supongo que lo que necesitas es un <div style="clear:both"></div> para que la division flotante quede dentro del objeto padre con sus mismas medidas de altura.
Cita de: hegispok en 2 Febrero 2016, 18:43 PM
Buenas, soy nuevo por aquí y por el diseño de webs, tengo un pequeño problema y no encuentro la manera de solucionarlo, lo mas probable es que sea una tontería de nada :-\
Pongo el código y ahora me explico:
<html>
<style>
img{
widht:100px;
height:100px;
}
div#fondo{
margin:auto;
margin-top:5px;
width:465px;
height:auto;
background-color:yellow;
}
div#abc{
margin-left:10px;
float:null;
}
</style>
<div id="fondo">
<div id="abc">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
</div>
</div>
</html>
La cosa es que todo sale bien, las imágenes pequeñitas, en fila y columnas y el fondo amarillo, pero el problema viene cuando quiero cambiar el valor de "float:null;" a "float:left;", al hacer esto, el fondo amarillo desaparece por completo, y necesito que esté en left y se vea el fondo amarillo, para otro código diferente a este.
PD: Poniendo el "height" del "div#fondo" en cualquier numero se ve, pero necesito que sea "auto", ya que a veces habrá mas imágenes y otras veces habrá menos.
Espero que me podáis ayudar.
Saludos. ;D
No se si he entendido bien lo que querías plantear pero... es esto?
<html>
<style>
img{
widht:100px;
height:100px;
}
div#fondo{
margin:auto;
margin-top:5px;
width:465px;
height:auto;
background-color:yellow;
}
div#abc{
margin-left:10px;
float:auto;
}
</style>
<div id="fondo">
<div id="abc" style="clear:both">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
<img src="http://www.enbolivia.com/files/imagen_corporativa.jpg">
</div>
</div>
</html>
Puse <div style="clear: both;"></div> al final del código y funcionó.
¡Gracias a ambos!
Saludos. ;-)