将两个 div 对齐到左侧

Question

基本上我想要做的事情是这样的：

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

，但不使用表格。

- Adelino

Answer 1

Here is an attempt:

http://jsfiddle.net/vaDCQ/

- Vincent Robert

---

margin-left 是在作弊哦 :P，如果你改变第一个 div 的内容，它会覆盖下一个 div 的内容。 - Adelino

是的，我同意，我不知道还有其他方法可以做到这一点。 - Vincent Robert

这并不是我所说的作弊，而是与浮动div一起工作的现实。如果您更改表格单元格的内容，则还可以将其拉伸超出其边界，例如大型图像。 - dnuttle

Answer 2

这个fiddle展示了基础知识：http://jsfiddle.net/cA3su/。但是有一些区别。首先，“内部”div不会像表格一样一直伸展到右侧。此外，您需要了解浮动和清除的工作原理。这需要一些练习和实验。简而言之，div永远无法完全像表格那样工作。但是一旦您知道如何做到这一点，div将使您摆脱许多表格带来的麻烦。

- dnuttle

---

例如，如果我在右侧div中插入一个宽度为100％的图像，它不会进入左侧div下面？ - Adelino

是的，这是其中一种可能发生的情况。如果元素太宽，则它们无法正确地浮动。就像其他示例所示，您需要注意宽度。我希望保持我的示例简单，但仍想强调您真的需要学习有关浮动和CSS布局的知识才能使用它们...需要注意一些“坑点”。 - dnuttle

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

- Alex

Answer 4

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

- Tural Ali