当超过父宽度时，浮动块元素不包裹

我想知道是否有可能让块元素在一个方向上浮动，当它们超过父元素的宽度时不会包裹。当超过父宽度时，浮动块元素不包裹

这是快速和简短的问题，多一点细节和示例，请参阅下面。

我已经做了一些关于这方面的研究，我还没有找到一个确定的答案，不管它是否是不可能的，这就是为什么我在这里寻找一个明确的答案，这是否可以做到。

而且在不可能的情况下，我希望能够快速解释一下，以便提高我对CSS工作原理的理解。

请看下面的例子。

我有1“容器”div和里面它我有3“行”divs。假设“容器”的假想宽度为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中为“容器”指定一个确切的宽度，因为我希望动态布局以适应不同的内容。

谢谢。

来源

2012-03-22 AncientRo

你正在寻找可以通过display: inline-block更换float: left，并具有父容器上white-space: nowrap来实现行为的行。

见本小提琴：http://jsfiddle.net/XYzea/1/容器内部

块对齐并排（如浮法），但它们的母体没有指定的宽度。顺便说一下，包装封装了嵌套的div。 inline-blockworks在所有现代浏览器中，除了IE < 8其中不可能使用该显示属性与任何黑客如果该元素是一个自然块元素

来源

2012-03-22 16:39:58 fcalderan

我想你还需要添加一些宽度和'overflow-x：scroll;' – Elen 2012-03-22 16:56:14

而不是指定.row的宽度而不是 – Elen 2012-03-22 17:00:57

@thirtydot如果你使用的是旧版IE，你不能使用那些黑客技巧div的。它仅适用于内联元素（或者新的html5元素，它们根本没有起始显示） – fcalderan 2012-03-22 17:02:33

我能想到的唯一方法是使容器>包装>行。该容器的大小可以动态的，有overflow:hidden而包装将保持在一个单行

来源

2012-03-22 16:35:28

尝试http://jsfiddle.net/kUVHW/1/：如果你设置宽度为100px的容器，.rows元素不在同一行，如果你没有指定一个宽度的父母将采取100％宽度 – fcalderan 2012-03-22 16:57:35

看看这个：http://jsfiddle.net/kUVHW/2/ – 2012-03-22 19:28:23

当超过父宽度时，浮动块元素不包裹

回答

相关问题