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 works，除了IE＆lt; 8，如果元素是自然块元素，则无法使用该显示属性进行任何黑客攻击

Answer 2

我能想到的唯一方法就是拥有容器＆gt;包装器＆gt;行。容器的大小可以是动态的，并且具有overflow:hidden，而包装器将行保持在一行中

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

2 个答案: