css - 在忽略父宽度的同时浮动元素旁边？

Question

我以前遇到过这个问题，但我不记得这个问题叫什么，也找不到相关的解决方案，所以我们又来了。

我需要向左浮动两个盒子。这些框具有静态宽度，与父框的宽度相同。现在发生的是盒子堆叠在彼此下方而不是浮动，因为父级不够宽。

这是我想要的（粗略）说明：

http://i.imgur.com/oHqsH.jpg

有任何想法吗？

Answer 1

据我所知，“干净”地做到这一点的唯一方法是拥有这种结构：

.window
  .parent
    .child
    .child

父width级是其所有子级的总和，而window具有一个子级的宽度。

Answer 2

white-space: nowrap我使用with更新了您的代码display: inline-block。如果您真的需要这样做float: left，请按照@Kurt 的建议进行操作，因为它应该可以工作。但我真的相信inline-block这是正确的方法。

检查小提琴或在此处查看代码：

.parent {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    font-size: 0;
}

.child {
    display: inline-block;
    width: 200px;
    font-size: 1rem;
}

Answer 3

要使该white-space: nowrap方法起作用，您需要在父项和子项之间使用position: absolute;. 子项将需要拥有position: relative;，并且您需要为顶级父项分配一个高度。

http://jsfiddle.net/79LWk/3/