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

Question

我在 Bootstrap 行换行时遇到 div 的一些问题，但我不希望它们这样做。我正在设计一个 Mastermind 游戏（Sinatra/Ruby/JS，用于教育目的），在 "new guess" 行中，包含三个钉子的单元格，然后是 "check guess" 按钮——所以，四个 divs.

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

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

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

可以看出问题here—the checkmark is supposed to be at the right side of the table, not below it. If you try an answer (click the peg holes to cycle through colors) and submit an answer, you can see what it's supposed to look like. The main view (which embeds "guessrow" and the "oldrows" erbs) is here. The "guessrow" is here and the "oldrows" is here. The css (scss) is here。

Answer 1

请在表单标签上使用 class 设置 overflow:hidden;（以清除浮动）。

说明

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

Answer 2

在您的代码中创建了一个空 div 见下文

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

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

试试这个代码看看

.pegcell.empty {
    display: none;
}

查看图片

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

Adding new div to row causes wrapping

html

css

ruby

word-wrap

sinatra