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/

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

1 个答案: