4

Dispongo de un inventario de accesorios en mi web.

Deseo agruparlos todos ellos en un div (grupal), y que a su vez contengan otro div (individual). Dentro de cada div (individual), insertar la imagen de cada accesorio junto con su nombre y un checkbox al lado. Preferiblemente he decidido -ordenarlos- de 3 en 3, otorgándoles a cada uno de ellos "30%" y que floten a la izquierda.

<div style='float:left; width:30%'>

Ver imagen: introducir la descripción de la imagen aquí

Hasta aquí todo correcto. Ahora la duda/pregunta: ¿cómo puedo añadir un espacio vertical, creo que se deberá utilizar "padding" para separar los elementos de una fila y otra fila?

Añado el código:

<div class="mostrar_accesorios" id="mostrar_accesorios">
    <center>
    <h3><b>Accesorios</b></h3><br/>
    <?php 
        $objeto_accesorios = BD::obtenerAccesoriosPorCabana($_REQUEST["idcabana"]);
        $todos_accesorios = BD::todosAccesorios();
        foreach($todos_accesorios as $objeto){
            $existe = false;
            foreach($objeto_accesorios as $columna){
                //Si el accesorio global está en el accesorio de la cabaña, true.
                if($objeto->getIdaccesorio() == $columna->getIdaccesorio()){
                    $existe = true;
                    break;
                }
            }
            if($existe){
                echo "<div style='float:left; width:30%'><img src='imagenes/".$objeto->getDescripcion().".png' height='28px' width='34px' title='".$objeto->getDescripcion()."'/><br/><label for='accesorio".$objeto->getIdaccesorio()."'><input type='checkbox' value='".$objeto->getIdaccesorio()."' id='accesorio".$objeto->getIdaccesorio()."' name='accesorios[]' checked>".$objeto->getDescripcion()."</label></div>";
            }else{
                echo "<div style='float:left; width:30%'><img src='imagenes/".$objeto->getDescripcion().".png' height='28px' width='34px' title='".$objeto->getDescripcion()."'/><br/><label for='accesorio".$objeto->getIdaccesorio()."'><input type='checkbox' value='".$objeto->getIdaccesorio()."' id='accesorio".$objeto->getIdaccesorio()."' name='accesorios[]'>".$objeto->getDescripcion()."</label></div>";
            }
            $existe = false;        
        }
    ?>
    <div style="clear:left"></div>
    </center>
</div>

2 respuestas 2

7

Lo único que debes hacer es agregarle a los div un margin-bottom:

echo "<div style='float:left; width:30%; margin-bottom: 20px'><img src='imagenes/".$objeto->getDescripcion().".png' height='28px' width='34px' title='".$objeto->getDescripcion()."'/><br/><label for='accesorio".$objeto->getIdaccesorio()."'><input type='checkbox' value='".$objeto->getIdaccesorio()."' id='accesorio".$objeto->getIdaccesorio()."' name='accesorios[]'>".$objeto->getDescripcion()."</label></div>";

Ejemplo funcional

.caja{
  float: left;
  width: calc(30% - 20px);
  height: 150px;
  background: black;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 20px;
}

.caja:nth-child(2n){
  background: chocolate;
}

.caja:nth-child(2n + 1){
  background: green;
}
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>
<div class="caja"></div>

3
  • 1
    Estas en todo, me quedo con tu propuesta. Commented el 14 dic. 2017 a las 22:11
  • 1
    Respuesta ejemplar de ambos.
    – omaza1990
    Commented el 14 dic. 2017 a las 22:30
  • 1
    @MiguelEspeso jajaja prácticamente hicimos lo mismo, saludos ! Commented el 15 dic. 2017 a las 0:46
5

      #div1, #div2, #div3 {background-color: #f4f4f4; margin: 5px; width: 50px; height: 80px;}
        #div2 {margin-top: 0px; margin-bottom: 0px; !important
<!DOCTYPE>
<html>
<head>
    <title>Divs with Margins</title>

</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>  

Eso quiza puedas hacerlo con el elemento 'margin' del css. Te dejo un ejemplo donde están separados por 5px tanto arriba como abajo, a excepción del div2 que solo posee margin a los lados. Aunque veo que ya hay una respuesta mejor que la mía

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.