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
}

Answer 3

与其他人一样，我会使用float: left，但您需要清除父div，就像在 working jsFiddle demo 中一样。

<强> HTML：

<div class="clearfix">
  <div class="floatLeft">
    <div>Topic</div>
    <div>Sub Topic</div>
  </div>
  <div class="floatLeft">
    <div>test 1</div>
    <div>Test 2</div>
  </div>
</div>

Hello

CSS：

div { 

    margin: 10px; 
    padding: 10px; 
    border: dotted 1px black; 

}

.floatLeft { float: left; }

/* The Magnificent Clearfix: 
   Updated to prevent margin-collapsing on child elements. 
   j.mp/bestclearfix */

.clearfix:before, .clearfix:after { 

    content: "\0020"; 
    display: block; 
    height: 0; 
    overflow: hidden; 

}

.clearfix:after { clear: both; }

/* Fix clearfix: 
   blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */

.clearfix { zoom: 1; }

Answer 4

不要使用div。（虽然您可以使用float:right和float:left来对齐同一行上的div 使用表格：

<table>
<tr>
<td>Topic</td>
<td>Test 1</td>
</tr>
<tr>
<td>Sub Topic</td>
<td>Test 2</td>
</tr>
<tr>

</tr>
</table>

Answer 5

<div>
  <div style="float:left">
    <div>Topic</div>
    <div>Sub Topic</div>
  </div>
  <div style="float:left">
    <div>test 1</div>
    <div>Test 2</div>
  </div>
</div>

如果这是列表数据，您可以使用表格。这是完全有效的事情。

Answer 6

实际上，使用选择器应该很容易。

div div div{
     display: inline;
}

这只会选择两个div个孩子的div。

Answer 7

我建议您使用CSS框架来执行此操作。我个人最喜欢蓝图。即使你使用CSS进入页面布局的高级水平，框架仍然可以很快地实现像你所描述的那样的微不足道的效果。

结帐：

http://www.blueprintcss.org/

http://www.blueprintcss.org/tests/

http://www.blueprintcss.org/tests/parts/sample.html

有关更多信息和示例代码。

HTH

Answer 8

div { overflow:hidden; width:100% }
div div { width:auto; float:left }
div div div { float:none }

无需清算div。

让我的DIV排队似乎很难

8 个答案: