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

【问题标题】：Adding new div to row causes wrapping将新 div 添加到行会导致换行
【发布时间】：2017-06-02 07:35:39
【问题描述】：

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

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

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

我这辈子都想不通为什么这个牢房坚持要包裹。没有在任何地方设置宽度，并且 div 设置为float: left。我按照某人的建议尝试了white-space: nowrap，但这没有帮助。

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

【问题讨论】：

你能在你的代码库之外创建一个简单的例子吗？我认为您可以以更好的方式解决此问题。您不需要使用 nowrap。那是针对内联元素的-不是浮动的。你的父元素不知道浮动是如何工作的（一旦你浮动它的孩子 - 它们不再处于自然流动中）并且应该有一个 clearfix - 或者（溢出隐藏或浮动本身）就像建议的那样 - 但这可能不是最理想的布局技术 - 取决于。 PS（您不需要指定“纯”JavaScript。;）

标签： html css ruby sinatra word-wrap

【解决方案1】：

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

解释

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

【讨论】：

谢谢！搞定了！你能解释一下“清除浮标”是什么意思吗？我不明白为什么会这样。我有点理解overflow:hidden 的作用（css-tricks.com/the-css-overflow-property），但我不明白它与这个 div 包装有什么关系。
请查看以上说明。

【解决方案2】：

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

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

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

试试这段代码看看

.pegcell.empty {
    display: none;
}

见 img

【讨论】：

换句话说，摆脱我想在那里的div。这在没有猜测时解决了问题，但在显示第一个猜测时引入了一个新问题（未对齐的列）。在没有猜测的情况下我可以使用 JS 隐藏它，但这看起来很笨拙......