Создание плиток с Divs

Question

Я пытаюсь показать две цветные плитки, одну влево, одну вправо. Каждый из них имеет номер большего шрифта и заголовок меньшего шрифта. Они должны иметь некоторую прокладку вокруг края, чтобы текст не ударился о край плитки.

Они должны заполнить контейнер, в котором они сидят горизонтально. Я установил каждую из двух плиток шириной 45% с элементом в середине 10%, на 100%.

Я достиг этого с помощью стола, и все работает отлично. Но я предпочел бы использовать Divs, которые можно было бы повторно использовать более легко.

Однако, когда я пытаюсь построить его с помощью Divs, граница, кажется, делает все слишком широким, так что оно не подходит. Я не понимаю, почему. Я пробовал комбинации границ, полей и прокладки.

.info-tile { 
 
    text-align: right; 
 
    padding: 10px; 
 
} 
 
.info-tile-large-text { 
 
    font-size: 400% 
 
} 
 
.info-tile-small-text, 
 
.info-tile-large-text {}

<div> 
 
    <table style="width:100%"> 
 
    <tr> 
 
     <td class="info-tile pending-enquiry-colours" style="width:45%;"><span class="info-tile-large-text">86</span> 
 
     <br/><span>Pending Enquiries</span> 
 
     </td> 
 
     <td class="" style="width:10%"></td> 
 
     <td class="info-tile active-enquiry-colours" style="width:45%;"><span class="info-tile-large-text">15</span> 
 
     <br /><span>Active Enquiries</span> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
    <div> 
 
    <div class="info-tile pending-enquiry-colours" style="width:45%; float: left;"><span class="info-tile-large-text">86</span> 
 
     <br/><span class="info-tile-small-text">Pending Enquiries</span> 
 
    </div> 
 
    <div style="width:10%; float: left" ;></div> 
 
    <div class="info-tile active-enquiry-colours" style="width:45%; float: right;"><span class="info-tile-large-text">15</span> 
 
     <br /><span class="info-tile-small-text">Active Enquiries</span> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Использование box-sizing: border-box на любом элементе, что вы имеете эту проблему с (иначе все ваши плитки).

По умолчанию большинство браузеров установлено box-sizing в content, а это означает, что если вы установите ширину элемента 400px и добавьте padding: 30px, он вычисляет общий размер элемента, чтобы быть 460px.

box-sizing: border-box делает противоположное, где ширина набора никогда не будет превышена заполнением.