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>
   

为什么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，并使“结果”面板的宽度恰好为400px，因此错误会显示出来。现在两个div是192px宽。这是有道理的 - 400px的48％是192px。宽度不包括边距，每个div为10px。所以div要求的总宽度是（192 + 10）* 2 =（202）* 2 = 404像素，这超过分配给它们的400px。难怪div正在包装而不是停留在同一排。

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