将两个 div 左对齐答案

【问题标题】：Align two div's to left将两个 div 左对齐
【发布时间】：2011-11-24 20:34:13
【问题描述】：

基本上我想做的是这样的：

http://jsfiddle.net/wQBq5/20/

不使用表格。

【问题讨论】：

标签： html css web

【解决方案1】：

这是一个尝试：

http://jsfiddle.net/vaDCQ/

【讨论】：

左边距作弊 :P，如果你改变第一个 div 的内容，它会覆盖下一个 div 的内容
是的，我同意，我不知道该怎么做。
这不是我所说的作弊，这是使用浮动 div 的现实。如果您更改表格单元格的内容，您也可以将其拉伸到其边界之外，例如一张大图。

【解决方案2】：

这个小提琴展示了基础知识：http://jsfiddle.net/cA3su/。但也有区别。一方面，“内部” div 不会像表格那样一直延伸到右侧。另一方面，您需要了解浮动和清除的工作原理。这需要一些练习和实验。简而言之，div 永远不会像表格那样工作。但是，一旦您知道如何操作，div 会让您摆脱表格带来的许多麻烦。

【讨论】：

例如，如果我在右侧 div 内插入 100% 宽度的图像，它不会在左侧 div 下方？
是的，这是可能发生的事情之一，如果元素太宽，则它们无法正确浮动。正如其他示例所示，由您决定宽度。我想让我的示例保持简单，但强调您确实需要了解浮动和 CSS 布局才能使用它们……有一些“陷阱”需要注意。

【解决方案3】：

您可以使用浮点数来实现。

你可以使用这样的东西（基本示例）：

html:

<div class="left-container">1</div>
<div class="right-container">
  <div class="number2">2</div>
  <div class="number3">3</div>
</div>

css:

.left-container{float:left;width:100px;}
.right-container{float:left;width:100px;}
.right-container .number2{float:left;width:100%;}
.right-container .number3{float:left;width:100%;}

【讨论】：

【解决方案4】：

这是我的例子..http://jsfiddle.net/wQBq5/37/

【讨论】：