Foros del Web » Creando para Internet » CSS »

Div al mismo alto

Estas en el tema de Div al mismo alto en el foro de CSS en Foros del Web. Buenas noches a todos, hay una forma de que los div que genera mi sitio los ponga a todos con el mismo alto, esteticamente se ...
  #1 (permalink)  
Antiguo 07/08/2014, 21:18
 
Fecha de Ingreso: agosto-2006
Mensajes: 32
Antigüedad: 18 años, 3 meses
Puntos: 1
Pregunta Div al mismo alto

Buenas noches a todos, hay una forma de que los div que genera mi sitio los ponga a todos con el mismo alto, esteticamente se ve muy mal. Uso bootstrap para este proyecto. Igualmente si la columna se pasa al medio, no se como reconoceria cual es la mas grande, es lo que me pone a pensar...



Pongo los codigos HTML y CSS

Código HTML:
Ver original
  1. <div class="row"><div class="col-xs-12 col-sm-4 "><div id="box"><div id="titulot">Clases de Ingles Privadas</div><div id="informacion"><p>Clases privadas de ingles nativo....</div></div></div>
  2.  
  3. <div class="col-xs-12 col-sm-4 "><div id="box"><div id="titulot">My english class</div><div id="informacion"><a href="m-verfotos-1"><img src="/admin/thumb/8701a5e4.jpg" class="img-responsive centrado" ><hr></a>
  4.    
  5.     </div></div></div>

Código CSS:
Ver original
  1. #box{
  2.     border:1px solid #1CBABC;
  3.     margin-bottom:20px;
  4. height:auto;
  5. overflow: hidden;
  6.    }
  7.  
  8.   #informacion
  9. {
  10. background-color:#FFFFFF;
  11. background-image:url(../resource/efecti11.png);
  12. background-repeat:no-repeat;
  13. background-position:center top;
  14. color:00a8aa;
  15. padding: 20px 5px 10px 5px;
  16. overflow: hidden;
  17. }
  #2 (permalink)  
Antiguo 07/08/2014, 22:38
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: Div al mismo alto

En principio puedes imitar el comportamiento de una tabla, usando algo como:

Código CSS:
Ver original
  1. .padre {
  2.   display: table;
  3. }
  4.  
  5. .hijos {
  6.   display: table-cell;
  7. }

O también usar flexbox:

Código CSS:
Ver original
  1. .padre {
  2.   display: flex;
  3. }
  4. .hijos {
  5.   flex: 1;
  6. }

En principio con esto último habría que poner más de un prefijo propietario por su compatiblidad.
  #3 (permalink)  
Antiguo 09/08/2014, 13:40
Avatar de pacomercon  
Fecha de Ingreso: agosto-2014
Mensajes: 15
Antigüedad: 10 años, 4 meses
Puntos: 2
Respuesta: Div al mismo alto

Aquí te adjunto varias webs donde hablan de distintos metodos, algúnos mejores que otros...

http://ceslava.com/blog/igualar-el-alto-de-las-columnas-con-css-divs-de-fondo/

http://www.elwebmaster.com/articulos/css-truco-para-igualar-la-altura-de-varias-columnas

Ingles:

http://webdesign.tutsplus.com/tutorials/quick-tip-solving-the-equal-height-column-conundrum--cms-20403

http://demo.hongkiat.com/css-equal-height/

http://css-tricks.com/fluid-width-equal-height-columns/

http://www.vanseodesign.com/css/equal-height-columns/

Esperoq ue te sirva...

Etiquetas: alto, background, color, html, responsive
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:04.