將新的div添加到行會導致換行

我不想讓它們在Bootstrap行的換行中出現div問題。我在設計一個Mastermind遊戲（Sinatra/Ruby/JS，用於教育目的），它在「新猜測」行中包含三個單元的單元格，然後是「檢查猜測」按鈕 - 四個div。將新的div添加到行會導致換行

在此之下，在第一次猜測之後，表格會顯示舊猜測以及評估猜測的黑白掛鉤。在用戶進行第一次猜測之前這不會顯示出來。

對於舊的猜測表，我決定添加一個新的div，爲迄今爲止的猜測次數。既然補充說，爲了使事情很好地排列起來，我在「新猜測」行的開頭添加了一個空單元格。但是現在，當你開始一個新遊戲時 - 在舊的猜測表出現之前 - 「新猜測」行中的最後一個單元格包裝。在你進行第一次猜測後它看起來很好。如果僅僅缺少新添加的空單元格，「新猜測」行就是它所具有的寬度。

我不能爲了我的生活找出爲什麼這個細胞堅持包裝。寬度未設置在任何位置，並且div設置爲float: left。按照某人的建議嘗試了white-space: nowrap，但這並沒有幫助。

您可以看到問題here-選中標記應該位於表格的右側，而不是下方。如果你嘗試一個答案（點擊釘孔來循環顏色）並提交答案，你可以看到它應該是什麼樣子。主視圖（嵌入「guessrow」和「oldrows」erbs）爲here。「guessrow」是here，「oldrows」是here。 css（scss）是here。

來源

2017-06-01 globewalldesk

你能否在你的代碼庫之外創建一個簡單的例子？我想你可以用更好的方式去解決這個問題。你不應該需要使用nowrap。這是內聯元素 - 不是浮動的。你的父元素並不知道浮動是如何工作的（一旦你浮動它的孩子 - 他們不再是自然流動），應該有一個清晰的修正 - 或者（像上面提到的那樣溢出隱藏或浮動本身） - 但這可能不是最理想的佈局技術 - 取決於。 PS（你不需要指定'plain'JavaScript;） – sheriffderek

請在表單標籤上設置一個類爲overflow:hidden;（清除浮動）。

說明

正如你可能已經注意到，CSS是非常複雜的，很難深刻地理解到任何人，我也是。我試圖解釋我的建議爲什麼起作用。 .board是絕對定位，因此它收縮包裝。如果內容沒有固有的寬度，往往會打破新的界限。如果浮動塊沒有清除元素（自清除父元素或清除兄弟元素），它們仍然不在正常的文檔流中，如果有足夠的空間，則水平對齊。自清除父（在本例中爲表單）建立一個新的塊格式化上下文，它包含子元素元素，並獲取必要的水平空間（如果可用）。作爲一個經驗法則，當你浮動某些東西時，你也需要清除浮動，否則你可能會面對意想不到的佈局行爲。以下鏈接總結以及浮動的概念：All About Floats

來源

2017-06-01 04:05:02 itacode

謝謝！搞定了！你能解釋一下「清除漂浮物」的含義嗎？我不明白爲什麼這會起作用。我有點理解什麼'overflow：hidden'（https://css-tricks.com/the-css-overflow-property/），但我不明白它與這個div包裝有什麼關係。 – globewalldesk

請檢查以上說明。 – itacode

在你的代碼中有創建一個空div見下文

<div class="pegcell empty" style=""></div>

，如果你刪除它或隱藏它，它會解決您的問題

試試這個代碼，看看

.pegcell.empty { 
    display: none; 
}

看到IMG

來源

2017-06-01 04:25:23 Rahul

換句話說，擺脫我想要在那裏的div。這可以在沒有猜測的情況下解決問題，但會在顯示第一個猜測時引入新的問題（未對齊的列）。當沒有猜測時，我可以使用JS來隱藏它，但那看起來很笨拙...... – globewalldesk

將新的div添加到行會導致換行

回答

相關問題