Comunidad oficial de diseñadores web, web developers y Webmasters. Aqui podemos tratar temas actuales sobre diseño y tecnología. Podemos compartir y actualizarnos. Flash, PHP, ASP, Java, HTML, CSS, MySQL, CMS, etc. Unite YA y lee los Sticky

Ver más
  • 20,628 Miembros
  • 16,141 Temas
  • 6,397 Seguidores
  • 0

[CSS] Alinear contenido de divs

¡Hola a todos!


Tengo un problema al linear el contenido de una cajas, tengo tres div con un ancho diferente que normalmente se ven así:

[CSS] Alinear contenido de divs

Use un inline-block para que quedaran en el mismo nivel, pero cuando inserto texto en cada uno sucede esto:

[CSS] Alinear contenido de divs



Les pongo el código que he utilizado

HTML

<div id="main">
        <div id="main-box1">lorem....</div>
        <div id="main-box2">lorem....</div>
        <div id="main-box3">lorem....</div>
</div>


CSS

  <style type="text/css">
    #main-box1{
      display: inline-block;
      height: 400px;
      width: 160px;
      margin: 10px;
      background-color: red;
    }
    #main-box2{
      background-color: orange;
      display: inline-block;
      height: 400px;
      width: 380px;
      margin: 10px;
    }
    #main-box3{
      background-color: yellow;
      display: inline-block;
      height: 400px;
      width: 240px;
      margin: 10px;
    }
  </style>

¿Por que sucede esto?

¿Como lo soluciono?


¡Saludos!
  • 0
  • 0Calificación
  • 0Seguidores
  • 137Visitas
  • 0Favoritos

4 comentarios

@_SeBaX95_ Hace más de 8 meses +1
Estás usando mal el display: inline-block, esta atributo se comporta como bloque, pero respecto a los demás elementos que la rodean es como si fuera una caja en línea. Capaz que esto alguien lo explica mejor que yo.

Lo correcto en este caso sería hacer uso de float:left, para que las cajas siempre floten a la izquierda de la anterior, ejemplo:

http://codepen.io/anon/pen/BKsmI
@Anzill3r Hace más de 8 meses +1
¡Gracias! había intentado con float pero no los había colocado donde eran, me solucionaste el problema
@pichoncitotv Hace más de 8 meses +1
display es para indicar que tipo de elemento es, si es un bloque o un elemento en línea (textos). No es una propiedad para alinear elementos.

Utilizá floats

http://codepen.io/anon/pen/ntcBx
@Anzill3r Hace más de 8 meses
Me di cuenta de que hay varias formas de alinear este tipo de elementos ¡Gracias!
@byinf Hace más de 8 meses +1
Le agregas float al primer contenedor y listo .

#main-box1{
display: inline-block;
height: 400px;
width: 160px;
margin: 10px;
background-color: red;
float:left;
}
.clear{
clear:both;
}

Y se te acomodan el resto de los contenedores a la izquierda luego haces abajo de todo de los 3

<div class="clear"></div>

Y no se te va a flotar nada en los costados.
@Anzill3r Hace más de 8 meses +1
¡Gracias compa!
@lawsy Hace más de 8 meses
Otra solucion, puedes ponerle vertical-align:top y se alinean los 3
Tienes que ser miembro para responder en este tema