CSS Metric Dashboard

Question

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

Мой код:

<style> 
    body { background-color: #000000} 
    #metrics { width: 95%; margin: 20px auto; } 
    #metrics > div { background-color: #1FAAAA; height: 200px; width: 200px; display: inline-block; margin:20px } 
    #metrics > div > div { font-weight: bold; color:#FFFFFF; width: 100%; text-align: center; } 
    .head { font-size: 40px; width: auto; line-height: 35px; } 
    .top_margin { margin-top: 10px } 
    .count { font-size: 60px; } 
    .diff { font-size: 40px; } 
</style> 

<div id="metrics"> 
    <div> 
     <div class="head">Long Status</div> 
     <div class="count">00</div> 
     <div class="diff">+/- 00</div> 
    </div> 
    <div> 
     <div class="head"><br>Status</div> 
     <div class="count ">00</div> 
     <div class="diff">+/- 00</div> 
    </div> 
</div> 

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

Заранее спасибо.

Answer 1

Я добавил класс для ящиков (class = "box") и оставил их влево. Не знаю, побеждает ли это цель встроенного блока, но в JSfiddle он выравнивается правильно. Я также удалил оборванную команду br (before Status) в пользу дополнения в классе.

DEMO

<style> 
body { 
    background-color: #000000 
} 
#metrics { 
    width: 95%; 
    margin: 20px auto; 
} 
.box { 
    background-color: #1FAAAA; 
    height: 200px; 
    width: 200px; 
    margin: 20px; 
    font-weight: bold; 
    color:#FFFFFF; 
    text-align: center; 
    display: inline-block; 
    float: left; 
} 
.head { 
    padding: 15px; 
    font-size: 30px; 
    line-height: 35px; 
} 
.top_margin { 
    margin-top: 10px 
} 
.count { 
    font-size: 60px; 
} 
.diff { 
    font-size: 40px; 
} 
</style> 

<div id="metrics"> 
    <div class="box"> 
     <div class="head">Long Status</div> 
     <div class="count">00</div> 
     <div class="diff">+/- 00</div> 
    </div> 
    <div class="box"> 
     <div class="head">Status</div> 
     <div class="count ">00</div> 
     <div class="diff">+/- 00</div> 
    </div> 
</div>