Question

我最近一直在努力管理我网页中的div。假设我有四个水平相邻的div，其代码如下：

<div style="float:left; width:24%; min-width:250px; height:90px; border: 2px solid #000;">
  div1
</div>
<div style="float:left; width:24%; min-width:20px; height:90px; border: 2px solid #000;">
  div2
</div>
<div style="float:left; width:24%; min-width:20px; height:90px; border: 2px solid #000;">
  div3
</div>
<div style="float:left; width:24%; min-width:20px; height:90px; border: 2px solid #000;">
  div4
</div>

我遇到的问题是当我调整浏览器窗口的大小时，第四个div会跳到div的行下面而只剩下三个。（div显然不是最接近20px的宽度。）

所以我的问题是：当没有达到最小宽度时，有没有办法防止div跳到下一行？

由于

编辑：我发现如果我在min-width属性中使用百分比而不是像素，它就不会跳转。这有点解决了我的问题，但我仍然试图让它以最小宽度使用px。

Answer 1

Application.Current.Dispatcher.Invoke(() =>
    {
        BulkInsert(requestId);
        //More UI sync calls here...
    });

所以在上面显示的宽度上做等等

Answer 2

将box-sizing: border-box添加到您的CSS中，以包含百分比宽度的边框。

否则，当边框的2 x 2px变得超过屏幕或容器宽度的1％时（一旦屏幕宽度小于400px就会出现这种情况），它将具有您描述的效果。 / p>

增加：你的第一个DIV的最小宽度为250px。这意味着，如果250px变得小于24％，则该div将（大）宽于整个宽度的24％。由于其他DIV仍然是24％宽，总和超过100％，第四个DIV被推到下一行。

为避免这种情况，您应该为所有DIV的宽度指定较小的百分比值，或者减小DIV1的最小宽度。在下面的例子中，我做了第一个：

＆＃13;

* {
  box-sizing: border-box;
}
.x {
float:left; width:55%; min-width:250px; height:90px; border: 2px solid #000;
}
.y {
float:left; width:15%; min-width:20px; height:90px; border: 2px solid #000;
}

＆＃13;

<div class="x" >
  div1
</div>
<div class="y">
  div2
</div>
<div class="y">
  div3
</div>
<div class="y">
  div4
</div>

＆＃13;

在html中未达到min-width时，防止div跳转到新行

2 个答案: