浮动DIV并排放置在2列布局中

Question

我有一个两列布局，列中有'tiles'。这些瓷砖也是浮动的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>

FIDDLE

Answer 1

http://jsfiddle.net/KtDhX/8/

怎么样？

我在你的div周围加了一个#wrapper并给它一个1000px的宽度。 我把你的第二根柱子向左漂移，然后你的第一根柱子向左漂浮，然后将两块瓷砖都漂浮起来，这样它们就不会离开它们的容器了。

同时尝试查看display: inline-block以避免浮动的有时错误行为，并允许您删除position: relative。

Answer 2

我的问题通过将float:left应用于所有容器div和tile div来解决。这是CSS 2.1 Specs。