[SOLUCIONADO] Un div al lado de otro y un salto de línea

blancoarnau · #1 (**permalink**) 06/01/2014, 11:21

Hola a todos. Ya publiqué otro tema en este foro. Preguntaba como alinear varios divs, es decir, uno al lado de otro porque creé unos 16 cuadros y no quería alinearlos uno por uno. Al final, creé una clase que los envolvía todos, usé el "float:left;" y me funcionó. El problema es que quiero alinearlos de cuatro en cuatro (cuatro por fila). Y no sé como hacerlo porque los cuadros salen todos en una misma línea.
No sé si me he explicado muy bien, ¿alguien puede ayudarme?

pzin · #2 (**permalink**) 06/01/2014, 15:32

Pues tendrás que poner que midan una cuarta parte de su contenedor:

Código CSS:

Ver originalwidth: 25%;

Y/o si necesitas un tamaño fijo, fijar un ancho al elemento que contenga a esos elementos.

blancoarnau · #3 (**permalink**) 07/01/2014, 05:26

Gracias por contestar. Pero se me queda igual. Voy a pasar el código:

Código HTML:

Ver original<body>
<div id="caja">
        <table id="tabla">
        <tr><td><div id="img0"></div></td>
   <td><div id="imgt">
        <div id="img1" class="imgp"></div><div id="img2" class="imgp"></div><div id="img3" class="imgp"></div><div id="img4" class="imgp"></div>
        <div id="img5" class="imgp"></div><div id="img6" class="imgp"></div><div id="img7" class="imgp"></div><div id="img8" class="imgp"></div><br/>
        <div id="img9" class="imgp"></div><div id="img10" class="imgp"></div><div id="img11" class="imgp"></div><div id="img12" class="imgp"></div>
        <div id="img13" class="imgp"></div><div id="img14" class="imgp"></div><div id="img15" class="imgp"></div><div id="img16" class="imgp"></div>
    </div></td></tr>    
</div></table>  
</body>

Código CSS:

Ver original<style type="text/css">
    div#caja{
        border-color:black;
        border-width:1px;
        border-style:solid;
        background-color:#CCC;
        height:500px;
        width:1000px;
    }
    div#img0{
        height:240px;
        margin-top:120px;
        width:380px;
        margin-left:10px;
        border-style:solid;
        border-color:black;
        border-width:1px;
        background-color:blue;
    }
    div#imgt{
        top:10px;
        height:360px;
        width:960px;
        position:absolute;
    }
    .imgp{
        height:60px;
        margin-top:10px;
        width:120px;
        margin-left:10px;
        border-color:black;
        border-style:solid;
        border-width:1px;
        background-color:blue;
        float:left;
    }
        
</style>

He usado el código que tenía al principio y el resultado ha sido este:

Si edito el width de .imgp a 25% me salen los cuadros más grandes pero saliendo de "caja". Por si no lo he explicado, he dividido "caja" en dos, uno para un cuadro grande y otro para los 16. No me preguntéis el porqué. Simplemente estoy experimentando.

pzin · #4 (**permalink**) 07/01/2014, 06:16

¿Y esa tabla qué pinta ahí? Además no corresponden bien los cierres de algún elemento.

Yo soy tú, borraba y empezaba otra vez.

Sólo tienes que tener un contenedor que mida lo que medirá imgp multiplicado por cuatro. Y luego la flotarlos cuando no quepan en horizontal, se irá automáticamente hacia abajo.

NadiaNV · #5 (**permalink**) 07/01/2014, 07:55

Buenas,

Como dice pzin, mejor evitar el uso de tablas.

A ver si el siguiente código te puede ayudar:

Código HTML:

<body>

<div id="caja">
      <div class="fila">
        <div id="img1" class="imgp"></div><div id="img2" class="imgp"></div><div id="img3" class="imgp"></div><div id="img4" class="imgp"></div>
    </div>
      <div class="fila">
        <div id="img5" class="imgp"></div><div id="img6" class="imgp"></div><div id="img7" class="imgp"></div><div id="img8" class="imgp"></div><br/>
    </div>
      <div class="fila">
        <div id="img9" class="imgp"></div><div id="img10" class="imgp"></div><div id="img11" class="imgp"></div><div id="img12" class="imgp"></div>
	</div>         
</div>
</body>

Código CSS:

Ver original#caja{
        border-color:black;
        border-width:1px;
        border-style:solid;
        background-color:#CCC;
        height:500px;
        width:1000px;
    }
 
    .fila{
        height:auto;
        width:auto;
        float:left;
        background-color:rgba(204,0,153,1)
    }
    .imgp{
        height:60px;
        width:120px;
        border-color:black;
        border-style:solid;
        border-width:1px;
        background-color:blue;
        float:left;
        margin: 10px;
    }