html - Div 跳到第二排？为什么？

Question

1. 打开这个页面：http: //jsfiddle.net/dwDZx/6/
2. 调整大小直到红色

3. 继续缩小浏览器

   <div id="container">
   <div id="div1"><div class="content">one</div></div>
   <div id="div2"><div class="content">two</div></div>
   

   ​</p>

为什么 div2 会跳下一行而不是调整大小？我该如何解决这个问题？

Answer 1

您正在为较小的屏幕尺寸添加边距。将边距设置为百分比并减去较小屏幕尺寸的宽度百分比。

所以不要以像素为单位设置边距。但以百分比表示。

Answer 2

在 //jsfiddle.net/dwDZx/9/ 更新了您的代码

Answer 3

当 div 为红色时，div 尝试遵循两个相关约束：width: 48%和margin-right: 10px. 如果 div 是跳下一行而不是调整大小，这意味着该行上没有足够的空间供他们两个使用——他们试图占用比可用空间更多的空间。因此，第二个 div 为自己创建了一个新行，因此两个 div 可以任意宽。所以让我们看看这些数字，看看为什么 div 需要太多空间。

加载http://jsfiddle.net/roryokane/kZZCh/，它会动态显示页面和每个 div 的宽度，并使 Result 面板的宽度正好为 400px，因此 bug 就会出现。现在两个 div 的宽度为 192px。这是有道理的——400px 的 48% 是 192px。宽度不包括边距，每个 div 为 10px。所以 div 要求的总宽度是 (192+10)*2 = (202)*2 = 404 像素，比分配给它们的 400px 还多。难怪 div 会换行而不是留在同一行。

那么你如何解决这个问题呢？Dany 的回答建议将margin-right值从像素值更改为百分比值。但这只是一种可能的解决方案。找到最佳解决方案取决于您为什么选择 和 中的两个特定数字，width: 48%以及margin-right: 10px保留哪个数字更重要。如果您需要将宽度保持在48%，请考虑是要保持固定的边距宽度还是切换到灵活的边距宽度。如果您仍需要固定宽度，请使用margin-right: 8px. 如果您想要灵活的宽度，请使用margin-right: 2%（Dany 的解决方案）。另一方面，如果您需要将右边距宽度保持在10px，那么对于宽度，请使用width: 47.5%。所有这些值确保即使页面只有 400px 宽，div 也保持在同一行。