Как показать две строки заголовка и данные без использования таблицы?

Question

У меня следующий HTML-код:

  <div><span class='top'>Answered</span></div><div id="hour">15</div>
  <div><span class='top'>Not Answered</span></div><div id="minute">35</div>
  <div><span class='top'>Marked for Review</span></div><div id="second">10</div>
  <div class='clear'></div>

Вывод вышеуказанного кода отображается следующим образом:

Answered
15
Not Answered
35
Marked for Review
10

Может ли кто-нибудь помочь мне перенести вышеуказанные данные в следующем формате? Также еще одна вещь, которую я не могу использовать <table> тег для этой манипуляции.

Answered  Not Answered  Marked for Review
   15          35               10

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

Answer 1

Во-первых, вам нужно обернуть все ваши пары верх-низ в div:

<div class="outer">
    <span class='top'>Answered</span>
    <div class="bottom" id="hour">15</div>
</div>
<div class="outer">
    <span class='top'>Not Answered</span>

    <div class="bottom" id="minute">35</div>
</div>
<div class="outer">
    <span class='top'>Marked for Review</span>
    <div class="bottom" id="second">10</div>
</div>
<div class='clear'></div>

Затем поместите внешние div влево и выровняйте их по центру:

.outer {
    float: left;
    text-align: center;
    margin: 5px;
}
.clear
{
    clear: both;
}

Рабочая jsFiddle: http://jsfiddle.net/6947c/