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>