CSS - COMO ORDENAR <li> uno debajo de otro sin importar tamaño con CSS?

   
Vista:

COMO ORDENAR <li> uno debajo de otro sin importar tamaño con CSS?

Publicado por novatophp (1 intervención) el 13/01/2014 21:14:45
He estado buscando por el foro a alguien que haya tenido la misma duda y no he encontrado nada. Lo expongo y a ver si alguien puede ayudarme (con lo que seguramente sera unan tontería)

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?:


Hay alguna forma de que se queden asi?:



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<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-->

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
/******* 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  *********/
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

COMO ORDENAR <li> uno debajo de otro sin importar tamaño con CSS?

Publicado por xve (349 intervenciones) el 14/01/2014 08:18:17
Ante todo se agradece tu explicación...

La única manera que se me ocurre que queden los <li> como en tu segunda imagen, es que cada pareja de <li> este dentro de un </div>... algo así:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <style>
        .grupo {float:left;}
        ul {list-style:none;padding:0px;}
        li {border:1px solid;width:100px;margin:0px 2px 2px 0px;}
        .grupo:nth-child(1) ul li {height:100px;}
        .grupo:nth-child(2) ul li {height:150px;}
        .grupo:nth-child(3) ul li {height:80px;}
    </style>
</head>
 
<body>
 
<div class="grupo">
    <ul>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
    </ul>
</div>
 
<div class="grupo">
    <ul>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
    </ul>
</div>
 
<div class="grupo">
    <ul>
        <li>&nbsp;</li>
        <li>&nbsp;</li>
    </ul>
</div>
 
</body>
</html>

Este ejemplo, es para que veas la posición únicamente... queda como así:


Espero que te sirva... coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar