設計三欄式布局時BFC重疊

Question

 .left { float:left; display:inline-block; } .right { float:right; display:inline-block; } .mid { display:inline-block; overflow:hidden; text-overflow: ellipsis; } .container { width:100px; overflow:hidden; text-overflow: ellipsis; white-space:nowrap; display:inline-block; } 

 <div class="container"> <div class="right">right</div> <div class="left">left</div> <div class="mid">midmidmidmidmidmidmidmid</div> </div> 

像上面一樣，我希望中間部分具有自動調整的寬度，這將是一個長文本，僅顯示“ ...”。 我計划使用float來實現三列布局，並且我了解到BFC永遠不會與其他BFC重疊，我的右側部分如何重疊。 幫助謝謝！

Answer 1

您可以簡單地使用Flexbox創建布局。 此資源可以幫助您開始使用它。 借助flex-wrap: wrap屬性，使用flexbox也可以解決“重疊”問題。 玩吧 。

 .flex { display: flex; } 

 <div class="flex"> <div class="right">right</div> <div class="left">left</div> <div class="mid">midmidmidmidmidmidmidmid</div> </div> 

在您的情況下，您的容器只允許100px寬，因此它會嘗試將所有內容容納在這個小空間中。 太小了。 使您的容器更大，或使用min-width 。

Answer 2

不確定您是如何得出的， “我了解到BFC永遠不會與其他BFC重疊。”

我將使用MDN的塊格式上下文作為源。

本質上，就浮點數而言，新的BFC將允許具有浮動后代的元素“看到”整個元素，而不僅僅是“元素”的內容。 元素浮動后，將其從常規文檔流中刪除。

發生重疊的原因是您已將其他屬性應用於元素，而不是因為是否有新的BFC。 如果刪除所有控制.mid和.container元素的內容的屬性，您將獲得所需的順序，但是.mid的內容不在一行上。

重疊也由於white-space: nowrap;發生white-space: nowrap; .container屬性，它強制.mid的內容位於同一行上，然后與.right的內容重疊。 請注意，我在.mid文本中添加了空格，以說明如果內容不太大，它將適合.left和.right之間的較小空間。

 .left { float: left; display: inline-block; } .right { float:right; display: inline-block; } .mid {} .container { width: 100px; display: inline-block; } 

 <div class="container"> <div class="right">right</div> <div class="left">left</div> <div class="mid">mid mid mid mid mid mid mid mid</div> </div> 

要獲得所需的結果，請添加white-space: nowrap; 改為.mid而不是.container並刪除display: inline-block; 。

 .left { float: left; } .right { float: right; } .mid { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .container { width: 100px; overflow: hidden; display: inline-block; } 

 <div class="container"> <div class="right">right</div> <div class="left">left</div> <div class="mid">midmidmidmidmidmidmidmid</div> </div>