CSS 3 列网格应用相等边距

Question

.num_pad_wrap {
    width:300px;
    background:#eee;
    height:300px;
}
.num_pad_wrap div {
    float: left;
    width: 30%;
    background: #666C77;
    height: 50px;
    margin:1%;
    border: 1px solid #000;
}

<div class="num_pad_wrap">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>0</div>
    <div>C</div>
    
</div>

我正在尝试做一个计算器。如您所见，我未能计算出适合容器的余量。如果我可以对像素进行硬编码，这很容易，但就我而言，我必须做百分比。如何为所有边平均设置边距样式？

Answer 1

CSS：

.num_pad_wrap {
    width: 300px;
    background:#eee;
    height:300px;
}
.num_pad_wrap .row {
    margin-left: 2%;
}
.num_pad_wrap .row div {
    float: left;
    width: 30%;
    background: #666C77;
    height: 50px;
    margin:1%;
    border: 1px solid #000;
} 

.HTML：

<div class="num_pad_wrap">
    <div class="row">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
    <div class="row">
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
    <div class="row">
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
    <div class="row">
        <div>0</div>
        <div>C</div>
    </div>
</div>

由于您的 3 个按钮占据了宽度的 96% (32% * 3(，因此剩余的总边距为 4%。

您可以将每行环绕在row类周围，然后将左边距设置为总边距的一半，在本例中2%。

Answer 2

你可以这样尝试： 演示

 .num_pad_wrap {
    overflow: hidden;
    width:300px;
    background:#eee;
    height:auto;
    padding:1.2% 1.2% 0% 1.2%;
}
.num_pad_wrap div {
    background: #eee;
    float: left;
    margin-left: 3.2%;
    margin-bottom: 3.2%;
    background: #666C77;
    height: 50px;
    width: 31.2%;
    margin-bottom: 3.2%;
}
/* clear col */
 .num_pad_wrap div:nth-of-type(3n+1) {
    margin-left: 0;
    clear: left;
}

.HTML：

<div class="num_pad_wrap">
    <div>1</div>
     ........
    <div>C</div>
</div>