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

Question

我不希望它们在Bootstrap行换行中遇到div的问题。我正在设计一个Mastermind游戏（Sinatra / Ruby / JS，用于教育目的），在“新猜测”行中，三个钉子的细胞然后是“检查猜测”按钮 - 所以，四个div。

在此之后，在第一次猜测之后，一张表显示了旧的猜测以及评估猜测的黑白钉。在用户进行第一次猜测之前，这不会显示。

对于带有旧猜测的表格，我决定添加一个新的div，用于到目前为止的猜测数量。因为添加它，为了使事情顺利排列，我在“新猜测”行的开头添加了一个空单元格。但是现在，当你开始一个新游戏时 - 在旧猜测表出现之前 - “新猜测”行中的最后一个单元格。你做出第一次猜测后看起来很好。 “新猜测”行正好是它只是缺少新添加的空单元格所需的宽度。

我不能为我的生活弄清楚为什么这个细胞坚持包装。宽度未在任何位置设置，div设置为float: left。我按照某人的建议尝试white-space: nowrap，但这没有帮助。

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

Answer 1

请在表格标签上设置overflow:hidden;类（以清除浮动）。

说明的

正如您可能已经注意到的那样，CSS非常复杂，很难让任何人深刻理解，我也是。我试着解释为什么我的建议有效。 .board绝对定位，以便收缩。如果内容没有固有宽度，则倾向于突破新行。如果浮动没有清除元素（自清除父级或清除同级元素），它们将保持在正常文档流之外，如果有足够的空间则水平对齐。自清除父级（在本例中为表单）建立一个新的块格式化上下文，它包含子元素元素，占用必要的水平空间（如果可用）。根据经验，当您浮动某些东西时，您还需要清除浮动，否则您可能会遇到意外的布局行为。以下链接总结了浮动的概念：All About Floats

Answer 2

在您的代码中，创建了一个空div，请参阅下面的

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

如果您将其删除或隐藏它，它将解决您的问题

尝试此代码并查看

.pegcell.empty {
    display: none;
}

请参阅img