浮動元素保持內部較窄塊元素的完整「原始」寬度

我有一個塊元素裏面的浮動元素。

在塊元素內添加文本可以水平擴展塊元素以及父浮動（就像它應該的那樣）。

如果我將寬度添加到內部塊元素，文本將被包裝並且塊元素將變成該寬度。

但是，浮動的元素仍然和塊元素一樣寬，沒有設置寬度，我希望它會縮小到塊元素的設置寬度。

文字是否有不可見的寬度？

這是一個非常簡單的小提琴，可以顯示我在說什麼。

.thumbs li 
{ 
    float:left; 
    border:solid 1px black; 
} 
.thumbs div 
{ 
    width:20%; 
    border:solid 1px red; 
} 



<ul class="thumbs"> 
    <li> 
<img src="http://placehold.it/250X250" /> 
    <div> 
    some text some text some text some text some text some textsome text some text 
    </div> 
</li> 
</ul>

爲什麼浮動元素留一樣寬，如果沒有這一規則寬的塊元素？

來源

2013-06-21 Nick Kiermaier

看起來不錯。你確切的問題是什麼？ –

你是說圖像和副本之間的空間嗎？如果是，則將圖像顯示爲「塊：」。如果否，Praveen說。 –

img和div的寬度都小於li的寬度。什麼是保持李的寬度？ LOL 爲什麼li元素（浮點數）水平摺疊？ –

設定寬度：20％;到一個至少沒有參考寬度的塊。

我發現奇怪的是看到，因爲<li>正在浮動，你仍然會得到<li>的這20％，以某種方式瀏覽器大小的平均大小的div本身？因此，最終，div將其內容的100％，然後調整到本身寬度的20％。

如果<li>在CSS的寬度，然後將其包裝，因爲它應該。

如果div有一個值，exept％的值，它會返回

它的錯誤導致你的CSS是不連貫莫名其妙:)

http://jsfiddle.net/bup88/4/

來源

2013-06-21 16:58:14

謝謝！那小提琴幫了忙。 –

@Nickthemagicman哦，我明白你在問什麼了。我認爲你問這個問題的方式最困惑。 – Alex

改變這種狀況的方法：

.thumbs div{ 
    float:right;/* UPDATE WITH */ 
    width:20%;/* CHANGE WITH THE SIZE THAT YOU WANT FOR THE DIV */ 
    border:solid 1px red; 
} 
.thums img{ 
    float:left; 
}

比所有將適合的水平。

來源

2013-06-21 16:51:53 rkpasia

瞭解到添加寬度是最佳做法，我也可以使用Javascript來做到這一點。但是，我想從理論的角度理解發生了什麼。爲什麼寬度仍然存在？這就像內聯元素不管文本在做什麼，總是保持它們的寬度。再次感謝您的幫助。 –

如果您不使用寬度標籤，則文本將佔用所有找到的空間，直到窗口結束或父寬度。如果您使用寬度，文本將被格式化爲您想要的大小。嘗試在jsFiddle中只留下一個單詞，大小將僅爲img的大小。 – rkpasia

我不是一個CSS專家，所以如果任何下面的假設是不正確的，有人讓我知道。

我認爲這是由於您的塊元素上的百分比width，這將着眼於它應該用百分比來使用，以計算最終寬度的寬度值的父元素（浮動的）的使用。

爲了找出這個百分比寬度，我猜佈局引擎首先計算塊元素沒有百分比規則的寬度，然後將浮動父元素設置爲該寬度，如果百分比規則不存在。現在浮動元素具有定義的寬度，子塊元素可以計算其百分比寬度。這個計算不會影響浮動父元素的寬度，但是，因爲已經佈局了。

將寬度設置爲px，或將塊的佈局類型更改爲內聯（就像j08691建議的那樣）將使其行爲更符合您的預期。

來源

2013-06-21 16:59:44 ajp15243

我的猜測也是如此。 –

謝謝。這就說得通了。 –

一個更好的選擇是對的thumbs此子元素使用inline-block的允許文本以填補空間或大或小，因爲你需要。如果刪除寬度，它將填充剩餘的空間。

.thumbs img { 
    display: inline-block; 
    vertical-align: top; 
    zoom: 1; 
} 
.thumbs div 
{ 
    display: inline-block; 
    vertical-align: top; 
    width:20%; 
    border:solid 1px red; 
    zoom: 1; 
}

來源

2013-06-21 17:06:16 Alex

謝謝。這就說得通了。 –

浮動元素保持內部較窄塊元素的完整「原始」寬度

回答

相關問題