让我的DIV排队似乎很难

Question

我有一个非常简单的代码:

<div>
  <div>
    <div>Topic</div>
    <div>Sub Topic</div>
  </div>
  <div>
    <div>test 1</div>
    <div>Test 2</div>
  </div>
</div>

但我想让"测试1"出现在Topic的正确位置.现在它出现在下面.有没有办法解决CSS？

Answer 1

<div>
  <div style="float:left;width:200px;">
    <div>Topic</div>
    <div>Sub Topic</div>
  </div>
  <div style="float:left;width:200px;">
    <div>test 1</div>
    <div>Test 2</div>
  </div>
<div style="clear:both;"></div>
</div>

Answer 2

在我的评论中,我在dl这里使用了一个元素.

HTML更具语义性,更轻松:

请参阅: http ://jsfiddle.net/46WRw/

<dl class="topics">
    <dt>Topic</dt>
    <dd>test 1</dd>

    <dt>Sub Topic</dt>
    <dd>Test 2</dd>
</dl>

.topics {
    overflow: hidden; /* clear floated child elements */
    background: #ccc;
    width: 200px
}
.topics dt, .topics dd {
    margin: 0;
    padding: 0;
    float: left;
    width: 50%
}
.topics dt {
    font-weight: bold
}