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>