html - 向行添加新的 div 会导致换行

Question

当我不希望它们出现时，我在 Bootstrap 行换行时遇到了一些问题。我正在设计一个 Mastermind 游戏(Sinatra/Ruby/JS，用于教育目的)，在“新猜测”行中，包含三个钉子的单元格，然后是“检查猜测”按钮——所以，四个 div。

在此之下，在第一次猜测之后，会出现一个表格，其中包含旧的猜测以及评估猜测的黑白 Hook 。在用户做出第一个猜测之前，这不会显示。

对于包含旧猜测的表格，我决定添加一个新的 div，用于到目前为止的猜测次数。由于添加了它，为了使事情排列得很好，我在“新猜测”行的开头添加了一个空单元格。但是现在，当您开始新游戏时——在包含旧猜测的表格出现之前——“新猜测”行中的最后一个单元格换行。在您做出第一个猜测后，它看起来不错。 “新猜测”行恰好是它缺少新添加的空单元格时的宽度。

我这辈子都弄不明白为什么这个细胞坚持要包裹起来。没有在任何地方设置宽度，div 设置为 float: left。我按照某人的建议尝试了 white-space: nowrap 但这没有帮助。

可以看到问题here —复选标记应该在表格的右侧，而不是在表格下方。如果您尝试一个答案(单击钉孔以循环显示颜色)并提交答案，您可以看到它应该是什么样子。主视图(嵌入“guessrow”和“oldrows”erb)是here . “猜测”是 here而“oldrows”是here . CSS (scss) 是 here .

Answer 1

请在表单标签上设置 overflow:hidden; 类(以清除 float )。

解释

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