當超過父寬度時，浮動塊元素不包裹

我想知道是否有可能讓塊元素在一個方向上浮動，當它們超過父元素的寬度時不會包裹。當超過父寬度時，浮動塊元素不包裹

這是快速和簡短的問題，多一點細節和示例，請參閱下面。

我已經做了一些關於這方面的研究，我還沒有找到一個確定的答案，不管它是否是不可能的，這就是爲什麼我在這裏尋找一個明確的答案，這是否可以做到。

而且在不可能的情況下，我希望能夠快速解釋一下，以便提高我對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

當超過父寬度時，浮動塊元素不包裹

回答

相關問題