Html 将新div添加到行会导致换行

我不想让引导行包装中的div出现问题。我正在设计一个智囊团游戏（Sinatra/Ruby/JS，用于教育目的），在“新猜测”行中，有三个PEG的单元格，然后是“检查猜测”按钮，所以有四个div

在这下面，在第一次猜测之后，一张表显示了旧的猜测和评估猜测的黑白挂钩。在用户做出第一个猜测之前，这不会显示

在使用旧猜测的表中，我决定添加一个新的div，作为到目前为止猜测的数量。自从添加了它之后，为了使事情很好地排列起来，我在“newguess”行的开头添加了一个空单元格。但是现在，当你开始一个新游戏时，在有旧猜测的表显示“新猜测”行的最后一个单元格之前。在你做出第一个猜测之后，它看起来很好。“new guess”行的宽度正好是它在缺少新添加的空单元格时的宽度

我一辈子都搞不懂为什么这个细胞坚持包装。宽度未在任何位置设置，div设置为

float:left

。我按照某人的建议尝试了

空白：nowrap

，但没有用

---

您可以看到问题所在-复选标记应该位于表格的右侧，而不是下方。如果您尝试一个答案（单击钉孔循环颜色）并提交一个答案，您可以看到它应该是什么样子。主视图（其中嵌入了“guessrow”和“oldrows”ERB）是。“猜测行”是，而“旧行”是。css（scss）为。

请设置

溢出：隐藏（以清除浮动）

解释

正如您可能已经注意到的，CSS非常复杂，任何人都很难深入理解，我也是。我试图解释为什么我的建议有效。
.board
完全定位，因此可以收缩包装。如果内容没有固有宽度，则倾向于打断成新行。如果浮动没有清除元素（自清除父元素或清除同级元素），它们将保持在正常文档流之外，如果有足够的空间，则水平对齐。自清除父元素（在本例中为表单）建立一个新的块格式上下文，该上下文包含子元素，占用必要的水平空间（如果可用）。根据经验，当您浮动某些内容时，还需要清除浮动，否则您可能会面临意外的布局行为。下面的链接很好地总结了浮动的概念：
在您的代码中创建了一个空div，请参见下文

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

请参见img
能否在代码库之外创建一个简单的示例？我认为你可以用更好的方式来做这件事。你不应该使用nowrap。这是针对内联元素的，而不是浮动。您的父元素不知道浮动是如何工作的（一旦您浮动它的子元素-它们不再处于自然流中），并且应该有一个clearfix-或者（溢出隐藏或浮动本身），就像建议的那样-但这可能不是最理想的布局技术-取决于。PS（您不需要指定'plain'JavaScript；。）换句话说，去掉我想要的div。这在没有猜测时修复了问题，但在显示第一个猜测时引入了一个新问题（未对齐的列）。我可以使用JS来隐藏它，当没有猜测的时候，但这看起来很笨拙…谢谢！搞定了！你能解释一下“清除浮动”是什么意思吗？我不明白为什么会这样。我有点理解溢出：隐藏（）的作用，但是我不知道它与这个div包装有什么关系。请检查上面的解释。
.pegcell.empty {
    display: none;
}