Question

我以前遇到过这个问题，但我不记得问题是什么，我找不到相关的解决方案，所以我们再来一次。

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

这是我想要的（粗略）插图：

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

有什么想法吗？

Answer 1

据我所知，“干净利落”的唯一方法就是拥有这种结构：

.window
  .parent
    .child
    .child

父母的width是其所有子女的总和，而window的宽度为一个孩子。

Answer 2

我使用white-space: nowrap和display: inline-block更新了您的代码。如果您确实需要使用float: left，请执行@Kurt建议的内容，因为它应该可以正常工作。但我真的相信inline-block是正确的方法。

检查Fiddle或查看此处的代码：

.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/

浮动元素彼此相邻而忽略父宽度？

3 个答案: