让我的 DIV 排队似乎很难答案

【问题标题】：Getting my DIVs to line up seems hard让我的 DIV 排队似乎很难
【发布时间】：2014-03-14 23:58:48
【问题描述】：

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

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

但我想让“测试 1”出现在主题的右侧。现在它出现在下面。有没有办法用 CSS 解决？

【问题讨论】：

但是你没有使用任何 CSS。现在，您只是使用 Web 浏览器的默认样式。换句话说，不仅可以用CSS解决它，而且如果你打算尝试使用<div>这样的通用标签，你必须使用CSS。就目前而言，这是非常不完整的代码。
@stargazer 我认为 可悲的不完整 是夸大其词。答案比您的评论短
@qntmfred，它在概念时尚中是可悲的不完整。只使用<div> 编写代码并期望它做任何有用的事情表明对网络的一般框架的了解非常不完整。
你应该在这里完全使用dl (definition list)。接听来电。
@stargazer 对于回答的每个人来说都足够了解她想要什么。当有人问关于 CSS 的问题时，没有必要指出他们对 CSS 的了解并不完整。

标签： html css

【解决方案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>

【讨论】：

我添加了一个额外的 div 来清除浮动，这可以解决一些常见的跨浏览器问题。
@qntmfred：我会自己修复它，一段时间后。我宁愿让@Treemonkey 自己修复它，这样他以后就不太可能犯同样的错误。
@Scott：您可以在 99% 的时间里简单地使用 overflow: hidden，就像我的回答一样。包含在 Stack Overflow 答案中比 clearfix 短得多:)
@Scott：我不反对，但这里有一些背景信息：您可能想阅读这个问题：stackoverflow.com/questions/5565668/… - 我不得不绞尽脑汁想一个例子，其中@ 987654326@ 没用。 @clairesuzy 还指出了 overflow: hidden 不会这样做的另一个实例（下拉菜单）。我个人不喜欢clearfix，因为您必须在 HTML 中添加一个额外的类，以便纯粹在 CSS 中处理。我也（再次）不喜欢在 Stack Overflow 答案中使用它，因为它很长。
@Scott：我不喜欢other than my own 这个问题（包括你的）的答案，因为它们是“div 汤”。 dl 元素是一个更好的选择。我认为我们都可以同意接受的答案不是最佳答案，但那是因为 OP 不是很有经验。

【解决方案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
}

【讨论】：

【解决方案3】：

和其他人一样，我会使用float: left，但你也需要像这个working jsFiddle demo一样清除父div。

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; }

【讨论】：

【解决方案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>

【讨论】：

我不是表格的忠实粉丝，但这确实解决了问题。
不要将表格用于不被视为表格数据的任何内容。
@tjameson @Loktar 是的，我并不总是推荐它，但似乎 OP 在这里有一些表格数据。
如果你想使用表格，那么应该真正使用正确的标题标记：P

【解决方案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>

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

【讨论】：

如果单词很多而不仅仅是“test 1”或“test 2”，则此答案不起作用:-(
@Christina 不确定其他词是什么 - 请查看此示例 jsfiddle.net/4PkDA

【解决方案6】：

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

div div div{
     display: inline;
}

这只会选择两个divs 的子divs。

【讨论】：

div div div { display:inline } 实际上应该这样做。而div > div > div { display:inline } 在 IE 中不起作用。
哦，我不知道IE的问题。

【解决方案7】：

我建议您使用 CSS 框架来执行此操作。我个人最喜欢蓝图。即使您在使用 CSS 的页面布局方面达到了高级水平，框架仍然可以用于实现您快速描述的那种微不足道的效果。

结帐：

http://www.blueprintcss.org/

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

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

更多信息和示例代码。

HTH

【讨论】：

【解决方案8】：

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

不需要清除div。

【讨论】：