鉻和邊緣首先和最後浮動中間圖像，這是正確的？

看來，微軟的優勢和谷歌Chrome浮動不正確重新排列的div，如果有三個div的向左浮動和頁面在444和436像素的第三格進入到第二個div的位置之間的寬度縮小而不是低於它。這個「bug」在firefox中不會發生。鉻和邊緣首先和最後浮動中間圖像，這是正確的？

我做了一個的jsfiddle進行測試http://jsfiddle.net/e47jckrh/

HTML

<div id="d1"> 
    <p>1</p> 
</div> 
<div id="d2"> 
    <p>2</p> 
</div> 
<div id="d3"> 
    <p>3</p>  
</div>

CSS

div{ 
    float: left; 
}

樓下有一個如何可視化表示也應做

全部頁面佈局

正確的div漂浮時，頁寬度大於444px

錯誤的div浮動以便當頁面寬度爲444和436px之間

正確的div浮動在頁面寬度小於444px

這可能只是我在想有什麼不對，但我認爲Firefox的行爲是正確的。

來源

2015-10-06 user3847141

小提琴做工精細的最新的Chrome版本。請更新你的Chrome。 – viks

按預期方式在Chrome和Edge中運行 – Bikas

在Chrome中適用於我。我可以在你的JSFiddle中看到你不僅僅使用Floats ..你正在使用Table佈局..？有沒有這個原因，你的問題表明你只是漂浮DIV的。 DIV3沒有浮動屬性。 –

我已經編輯您的提琴在這裏：http://jsfiddle.net/e47jckrh/5/

你沒有浮動的元素都如你的問題建議。因此，我將float: left;添加到編號爲3的div，並將所有3都設置爲display: inline-block;。並使用display: table;和display: table-cell;與vertical-align: center;是一個真正的老方式來得到東西垂直對齊。

這3條線路的大部分工作的事情：

position: relative; 
top: 50%; 
transform: translateY(-50%);

來源

2015-10-06 10:53:03 Jay

表格居中沒有任何問題。並且每種方法都不適用於任何情況，所以在劇本中都有這兩種方法。 – Alejalapeno

@Alejalapeno當然最好有多種選擇。但我不認爲僅僅爲了垂直居中而將事物顯示爲表格和表格單元是最佳實踐。佈局_used_完全基於表格。他們不再是了。 – Jay

的行爲受到保證金正確引起的。

當DIV 2達到其容器右限制溢出。在這種情況下，您可以通過保證金控制他的限制。但是，保留權限僅在後續元素（其計算的基於後續元素）時纔有效。在這種情況下DIV 3.

它在新行溢出後的股利3獲取其位置。但是在這種情況下，由於它是該流程中的最後一個元素，因此保證金右移不起作用。

編輯：我只是意識到你沒有浮動所有元素，我不知道這是否是你最初的想法。如果是這樣，我不會刪除這個答案。

來源

2015-10-06 10:50:07 Paran0a

好的。所以#d3不應該是在右側，因爲在所有它不浮動，但你使用display:table。這給了它由於某種原因被其他兩個div浮動的效果。

由於它使用display: table#d3的頁邊距不在頁面上，但不算作「不適合」，不要強制它到下一行。

#d2雖然浮動，但它的利潤影響它。所以在小範圍內，您遇到這種情況#d1 + #d2將不適合，因爲它們的利潤率對總體較大的寬度有貢獻，但是#d1 + #d3將會因爲#d3未受其右邊緣的影響而使得組合總體較小的寬度。

簡單的辦法就是浮動#d3還有：

#d3 { 
    background-color: #ede4ad; 
    border: 3px dotted #6e5b3c; 
    clear: right; 
    float: left; 
}

來源

2015-10-06 10:52:23 Alejalapeno

鉻和邊緣首先和最後浮動中間圖像，這是正確的？

回答

相關問題