1

tengo un div padre y dentro 4 div internos hijo uno al lado del otro, dentro de cada div hijo tengo 3 div; uno contiene un titulo, el otro una imagen y el ultimo un icono. He notado que se alinean desde abajo y si una imagen no tiene la misma altura el titulo queda a diferente altura a los demás. yo deseo que el titulo siempre quede arriba y a la misma altura independiente del tamaño de la imagen

de antemano agradezco su ayuda como queda

.cajapadre {	
    text-align: center;/* Una caja al lado de la otra importante padre*/
	margin-bottom: 0px;
	}
.caja4hijo {
	background-color: #F8F8F8;
 	padding: 0px;
  	margin: 0px;
	width: 225px;
	display: inline-block;/* una caja al lado d ela otra importante hoja */
  }
  .espacio-art {
	padding-bottom: 15px;
}
.titulo-art {
	font-family: 'Sansita', sans-serif;
	font-size: 1.2em;
	color: #C42427;
	background: #9AB01E;
  }
<article>
<!--primera tanda-->        	
				<div class="cajapadre">
				  <div class="caja4hijo">
			    	<div class="titulo-art espacio-art">3M™ Littmann® Pediatrico</div>
			    	<div class="imagen-art espacio-art"><a class="picfancy" href="http://arbolesdenavidad.net/wp-content/uploads/2013/10/arbol-bajito-120-510.jpg" title="3M™ Littmann® Select"><img src="img/thumbs/liv.jpg" width="133"alt=""/></a></div>
                    <div class="boton-art espacio-art"><img src="img/boton/comprar.jpg" width="126" alt=""/></div>
                  </div>
				<div class="caja4hijo">
			 	<div class="titulo-art espacio-art">3M™ Littmann® Select</div>
			    	<div class="imagen-art espacio-art"><a class="picfancy" href="http://1.bp.blogspot.com/-njHeRmV9ZN4/TfLBdtZxPnI/AAAAAAAANEc/iqHI9Q_nN0c/s1600/copiadepencil4wi9.gif" title="3M™ Littmann® Select"><img src="img/thumbs/sel.jpg" width="133"alt=""/></a></div>
                    <div class="boton-art espacio-art"><img src="img/boton/comprar.jpg" width="126" alt=""/></div>
		 	 	</div>
					<div class="caja4hijo">
						<div class="titulo-art espacio-art">3M™ Littmann® Pediatrico</div>
			    	<div class="imagen-art espacio-art"><a class="picfancy" href="img/fonendos/Liviano.jpg" title="3M™ Littmann® Select"><img src="img/thumbs/liv.jpg" width="133"alt=""/></a></div>
                    <div class="boton-art espacio-art"><img src="img/boton/comprar.jpg" width="126" alt=""/></div>
					</div>
					<div class="caja4hijo">
						<div class="titulo-art espacio-art">3M™ Littmann® Pediatrico Edición Especial</div>
			    	<div class="imagen-art espacio-art"><a class="picfancy" href="img/fonendos/Liviano.jpg" title="3M™ Littmann® Select"><img src="img/thumbs/liv.jpg" width="133"alt=""/></a></div>
                    <div class="boton-art espacio-art"><img src="img/boton/comprar.jpg" width="126" alt=""/></div>
					</div>
				</div>
       		</article>
<!--fin primera tanda-->     

1
  • Te recomiendo usar la libreria de bootstrap para maquetar elementos en css. Commented el 10 abr. 2017 a las 14:46

2 respuestas 2

3

el problema persiste en la propiedad display:inline-block de los elementos padres de cada caja de producto, es decir los elementos con clase '.caja4hijo'

Si lo reemplazas por display: block y realizas un float:left consigues que tus elementos titulo estén alienados.

introducir la descripción de la imagen aquí

Luego eso si , depende de tu diseño de plantilla , y la disposición de otros elementos, ya que el float:left provocará que el padre de estos elementos pierda la referencia de altura. Tendrás que usar un elemento con la propiedad clear:both; por ejemplo.

Yo te aconsejaría usar un framework css como bootstrap o material. Además de ayudarte con todo el tema del grid(distirbución de elementos "cajas" de tu plantilla) te aportarán muchísimos más elementos y efectos útiles que harán tu trabajo rápido y liviano.

Aquí tienes los enlaces: http://getbootstrap.com/ , http://materializecss.com/ , http://foundation.zurb.com/

3
  • y como haria para que cada elemento ocupe una altura especifica? dándole un espacio relativamente grande a las imagenes del medio porque algunas varían de tamaño.es decir que el titulo y la imagen de abajo (comprar) tengan una posicion fija que este en la misma linea de la imagen del lado
    – Daniel
    Commented el 10 abr. 2017 a las 14:10
  • Creo que visualmente esta resuelto, le adicione a la caja titulo, caja imagen caja del botón. gracias
    – Daniel
    Commented el 10 abr. 2017 a las 14:38
  • @Daniel , me alegro de que ya te funcione, un saludo. Commented el 10 abr. 2017 a las 15:09
1

Debes establecerle un alto a la imagen para hacer lo que tu deseas, ya que la imagen tienen tamaños diferentes, si es lo mismo con la imagen del botón es mejor establecerle un alto para evitar que suceda el desacomodo del titulo por eso he establecido una regla para la clase .imagen-art

.imagen-art img{
  height: 100px;
}

o bien se lo puedes poner en la etiqueta <img /> de esta forma

<img src="img/thumbs/liv.jpg" width="133" height="100px" alt=""/>

Nota:
Debes tener en cuenta que al aplicarle un ancho y un alto la calidad de la imagen puede perderse, por ello es mejor tener todas las imágenes en una misma resolución.

2
  • Lo podria hacer sin tocar la altura por defecto de la imagen?
    – Daniel
    Commented el 10 abr. 2017 a las 13:49
  • Podrías ponerle la altura al <div class="imagen-art espacio-art"> pero si una imagen es más alta que el alto del div la imagen del botón se vera encimada de la imagen del producto
    – JuankGlezz
    Commented el 10 abr. 2017 a las 13:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.