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

我不想让它们在Bootstrap行的换行中出现div问题。我在设计一个Mastermind游戏（Sinatra/Ruby/JS，用于教育目的），它在“新猜测”行中包含三个单元的单元格，然后是“检查猜测”按钮 - 四个div。将新的div添加到行会导致换行

在此之下，在第一次猜测之后，表格会显示旧猜测以及评估猜测的黑白挂钩。在用户进行第一次猜测之前这不会显示出来。

对于旧的猜测表，我决定添加一个新的div，为迄今为止的猜测次数。既然补充说，为了使事情很好地排列起来，我在“新猜测”行的开头添加了一个空单元格。但是现在，当你开始一个新游戏时 - 在旧的猜测表出现之前 - “新猜测”行中的最后一个单元格包装。在你进行第一次猜测后它看起来很好。如果仅仅缺少新添加的空单元格，“新猜测”行就是它所具有的宽度。

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

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

来源

2017-06-01 globewalldesk

你能否在你的代码库之外创建一个简单的例子？我想你可以用更好的方式去解决这个问题。你不应该需要使用nowrap。这是内联元素 - 不是浮动的。你的父元素并不知道浮动是如何工作的（一旦你浮动它的孩子 - 他们不再是自然流动），应该有一个清晰的修正 - 或者（像上面提到的那样溢出隐藏或浮动本身） - 但这可能不是最理想的布局技术 - 取决于。 PS（你不需要指定'plain'JavaScript;） – sheriffderek

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

说明

正如你可能已经注意到，CSS是非常复杂的，很难深刻地理解到任何人，我也是。我试图解释我的建议为什么起作用。 .board是绝对定位，因此它收缩包装。如果内容没有固有的宽度，往往会打破新的界限。如果浮动块没有清除元素（自清除父元素或清除兄弟元素），它们仍然不在正常的文档流中，如果有足够的空间，则水平对齐。自清除父（在本例中为表单）建立一个新的块格式化上下文，它包含子元素元素，并获取必要的水平空间（如果可用）。作为一个经验法则，当你浮动某些东西时，你也需要清除浮动，否则你可能会面对意想不到的布局行为。以下链接总结以及浮动的概念：All About Floats

来源

2017-06-01 04:05:02 itacode

谢谢！搞定了！你能解释一下“清除漂浮物”的含义吗？我不明白为什么这会起作用。我有点理解什么'overflow：hidden'（https://css-tricks.com/the-css-overflow-property/），但我不明白它与这个div包装有什么关系。 – globewalldesk

请检查以上说明。 – itacode

在你的代码中有创建一个空div见下文

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

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

试试这个代码，看看

.pegcell.empty { 
    display: none; 
}

看到IMG

来源

2017-06-01 04:25:23 Rahul

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

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

回答

相关问题