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

你可以嘗試這樣的：Demo

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