超出父宽度时不浮动的浮动块元素

Question

我想知道块元素是否可能在某个方向上浮动,当它们超出父元素的宽度时不会换行.

这是一个快速而简短的问题,有关详细信息和示例,请参阅下文.

我已经对此做了一些研究,但我还没有找到一个明确的答案,不管它是否是不可能的,这就是为什么我在这里寻找一个明确的答案,说明这是否可以做到.

如果不可能,我会很感激对它的快速解释,这样我就可以提高对CSS工作原理的理解.

请参阅以下示例.

我有1个"容器"div,里面有3个"行"div.假设"容器"的假设宽度为200px,每个"行"的假设宽度为100px.这些值未在css中指定,它们根据页面上的内容而有所不同.

每个"行"浮动到左侧,使它们水平显示.

<div class="container">
    <div class="row">
        Some text
    </div>
    <div class="row">
        Some text
    </div>
    <div class="row">
        Some text
    </div>
</div>

.row {
    float: left;
}

在这种情况下,当"行"的总宽度超过"容器"的宽度时,"行"是否可以不包裹并保持在单个水平线中？

仅仅是为了强调,我无法为css中的"容器"指定精确的宽度,因为我希望布局动态以适应不同的内容.

谢谢.

Answer 1

你要找的行为可以通过更换可实现float: left用display: inline-block,且white-space: nowrap在父容器上.

看到这个小提琴:http://jsfiddle.net/XYzea/1/

容器内的块并排排列(如float),但它们的父级没有指定宽度.顺便说一句,包装器包含嵌套的div.inline-block 适用于除IE <8以外的所有现代浏览器,如果该元素是自然块元素,则无法使用该显示属性进行任何黑客攻击