用Divs創建瓷磚

我想顯示兩個彩色的瓷磚，一個在左邊，一個在右邊。它們每個都有一個較大字體的數字和一個較小字體的標題。他們應該在邊緣周圍填充一些填充物，以便文本不會碰到拼貼的邊緣。用Divs創建瓷磚

他們應該填充他們坐在水平的容器。我已經將兩個瓷磚中的每一個都設置爲寬度的45％，其中一個元素在10％的中間，總計100％。

我用表達到了這一點，它一切正常。但我寧願使用可以更容易重新使用的Div。

但是，當我嘗試使用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>

來源

2016-02-26 Chris

我認爲填充將添加到div的大小。你有沒有嘗試添加盒子大小：邊框;到你的信息瓷磚課？ –

要在您的寬度/高度計算中加入邊框/填充，請添加'* {box-sizing：border-box;}' –

試試https://jsfiddle.net/Lg0wyt9u/103/ –

，您有與問題（也就是所有的瓷磚）任何元素上使用box-sizing: border-box。

默認情況下，大多數瀏覽器設置box-sizing到content，也就是說如果你的元素的寬度設置爲400px，並添加padding: 30px，它計算元件的總大小爲460px。

box-sizing: border-box做了相反的處理，其中設置的寬度永遠不會被填充超過。

來源

2016-02-26 16:21:22 Aeolingamenfel

非常感謝@Aolingamenfel – Chris

否問題。我無法告訴你我遇到這個問題的次數。 – Aeolingamenfel

@Chris所有這一切都是通過使用框大小來改變「寬度」的定義。如果你已經理解了CSS的寬度是如何工作的，這根本就不是問題。盒子大小不會「修復」任何東西。只有您最初使用的值是一個問題。 – Rob

用Divs創建瓷磚

回答

相關問題