Position one div inside another in the upper part and the others below

Question

Position one div inside another in the upper part and the others below

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

I have a div father and inside 4 div internal son next to each other, inside each div son I have 3 div; one contains a title, the other an image and the last an icon. I have noticed that they are aligned from below and if an image does not have the same height the title is at different height from the others. I want the title always to be up and at the same height regardless of the size of the image

in advance I appreciate your help

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

html css3 css

asked by Daniel 10.04.2017 в 13:02

source

2 answers

1

You must set a stop to the image to do what you want, since the image has different sizes, if it is the same with the image of the button it is better to set a stop to avoid the deletion of the title that is why I have established a rule for class .imagen-art

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

or you can put it on the <img /> tag in this way

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

Note:
You must bear in mind that when applying a width and a height the quality of the image can be lost, for that reason it is better to have all the images in the same resolution.

answered by 10.04.2017 в 13:47

How to superimpose a layout on top of another layout? Android components together when running app

score 3 · Accepted Answer

The problem persists in the display: inline-block property of the parent elements of each product box, that is, the elements with class '.box4child'

If you replace it by display: block and make a float: left you get your title elements are alienated.

Then that if, it depends on your template design, and the layout of other elements, since the float: left will cause the father of these elements to lose the height reference. You will have to use an element with the property clear: both; for example.

I would advise you to use a CSS framework like bootstrap or material. In addition to helping you with the whole grid theme (distirbución elements "boxes" of your template) will bring you many more elements and useful effects that will make your work fast and light.

Here are the links: link , link , link