如何在不使用表格的情况下显示标题和数据两行

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/