El caso es que estoy haciendo una sección en mi pagina que contiene un div (que abarca un trozo de la web) y a su vez dentro tengo varios <li>con el mismo id con la propiedad float left, para que formen tres columnas.
El problema que tengo es que los tamaños de altura de los <li> varia en función de su contenido y los <li>no se sitúan en la web como yo quiero (por orden)
la explicación ha sido bastante mala jeje, asi que adjunto dos imágenes una con lo que me pasa y otra con como quiero que se quede.
El <li>4 en lugar de ponerse debajo del 1 se queda debajo del 3 y el resto empiezan a partir de la linea de rayas.
Hay alguna forma de que se queden asi?:
Código:
<section id="blog_izq">
<div id="contenido_interno_pq_x_pagina">
<div class="contenido_interno_pq">
<ul>
<li class="ubicacion_x_cada_li">
<img src="/a/images/maquillaje/1.jpg" alt="" width="198" />
<div class="contenido_interno_title">
<h3 >212 VIP</h3>
</div>
</li>
<!---*****************************-->
<li class="ubicacion_x_cada_li">
<img src="/a/images/maquillaje/4.jpg" alt="" />
<div class="contenido_interno_title">
<h3 >L'OREAL</h3>
</div>
</li>
<!---*****************************-->
<li class="ubicacion_x_cada_li">
<img src="/a/images/maquillaje/3.jpg" alt="" width="198" />
<div class="contenido_interno_title">
<h3 >QUEEN</h3>
</div>
</li>
<!---*****************************-->
<li class="ubicacion_x_cada_li">
<img src="/a/images/maquillaje/3.jpg" alt="" width="198" />
<div class="contenido_interno_title">
<h3 >FASHION</h3>
</div>
</li>
<!---*****************************-->
<li class="ubicacion_x_cada_li">
<img src="/a/images/maquillaje/4.jpg" alt="" width="198" />
<div class="contenido_interno_title">
<h3 >QUEEN</h3>
</div>
</li>
<!---*****************************-->
</ul>
</div><!-- FIN blog_contenido_interno -->
<!-- <h2 class="titulo_contenido_interno_pq_x_pagina">Maquillaje</h2> -->
</div><!-- FIN BLOG_IZQ_1 -->
</section><!--FIN BLOQUE IZQUIERDO-->
Código:
/******* MAQUETACION MAQUILLAJE *********/
#contenido_interno_pq_x_pagina
{
background: red; /*repeat scroll 0 0 #FFFFFF;*/
border-bottom: 1px dashed #DDDDDD;
display: inline-block;
margin-bottom: 15px;
padding:3px 0 0 3px;
/*position: relative;*/
vertical-align: top;
width:100%;
}
.ubicacion_x_cada_li
{
background: none repeat scroll 0 0 #FFF;/*#86AEE2;*/
/*box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);*/
box-shadow: 0px 0px 3px #575757;
border-radius: 3px;
float: left;
height: 100%;
margin-right: 5px;
margin-bottom: 25px;
width: 200px;
}
.ubicacion_x_cada_li li
{
}
/*BUEN COLOR #E2B479
AZUL DE LAPAGINA MAS BAJO #77C8E4
ANARANJADO #FF3900*/
.ubicacion_x_cada_li img
{
/* display: block;*/
padding-bottom: 5px;
}
.contenido_interno_title
{
background-color: #FF6A40;
margin:0 auto;
padding: 10px 0;
text-align:center;
text-transform: uppercase;
width:100%;
}
.contenido_interno_title h3
{
color: #FFFFFF;
font-family: "BebasNeue",Helvetica,Arial,sans-serif;
font-weight: bold;
font-size: 25px;
letter-spacing: 2px;
}
/******* FIN MAQUETACION PAGINA 2 *********/
