Home / Questions / 124909
Accepted
omaza1990
Asked: 2020-12-15 13:55:01 +0800 CST 2020-12-15 13:55:01 +0800 CST

如何在div中的元素之间添加垂直空间？CSS

  • 772

我的网站上有一个配件清单。

我想将它们全部分组到一个（组）div中，该div又包含另一个（个人）div。在每个 div（单个）中，插入每个配件的图像及其名称和旁边的复选框。我最好决定将它们按 3 个 3 排序，给它们每个“30%”并浮动到左边。

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

看图： 在此处输入图像描述

到目前为止一切都是正确的。 现在的疑问/问题：如何添加垂直空间，我认为应该使用填充来分隔一行和另一行的元素？

我添加代码：

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

2 Answers

  1. Best Answer

    您所要做的就是添加div一个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>";

    功能示例

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

    • 7 

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

    你也许可以用css的'margin'元素来做到这一点。我给你留下一个例子，它们在上面和下面都被 5px 分开，除了 div2 只在侧面有一个边距。虽然我看到已经有比我更好的答案了

    • 5