html - 在 2 列布局中并排浮动 DIV

Question

我有一个两列布局，列中有“图块”。这些图块也是浮动 div。期望的结果是一个非常表格的布局，不使用表格......像这样：

问题：为什么在链接的小提琴中我的第一个图块在我的容器 div 之外呈现？

<div class="column1"></div>
<div class="column2"> <!-- I am floating next to column1 -->
 <div class="tile-container">
  <div class="tile1"></div>
  <div class="tile2"></div> <!-- I am floating next to tile1 within column2 -->
 </div>
</div>

小提琴

Answer 1

http://jsfiddle.net/KtDhX/8/怎么样

我#wrapper在你的 div 周围添加了一个 1000px 宽度。我已经将您的第二列和第一列浮动，并将两个瓷砖都向左浮动，这样它们就不会离开容器。

还可以尝试display: inline-block避免浮动有时出现的错误行为，并使您能够删除position: relative.

Answer 2

我的问题通过应用于float:left所有容器 div 和瓷砖 div 得到解决。这是根据CSS 2.1 规范。