Question

这很奇怪。我正在尝试在右浮动div旁边有一个固定宽度的div，我不想重新排序div（因为这是分布式主题）。所以我在固定div上使用负边距右边，我觉得奇怪的是：如果它是-4px或更小，那么浮动移动到一边;否则，它会保持在低于。

使用live demo with code at jsbin进行游戏，其中包含以下内容：

<style>
  .container {
    width: 200px;
    height: 200px;
  }
  .box {
    width: 100px;
    height: 100px;
  }
  .one {
    margin-right: -4px; /* If <= -4, .two box shifts up */
    display: inline-block;
  }
  .two {
    float: right;
  }
</style>
  <div class="container">
    <div class="box one"></div>
    <div class="box two"></div>
  </div>

有人可以解释这个谜吗？在这种情况下，数字-4有什么特别之处？

Answer 1

4px恰好是font-size处“空格”的宽度。

如果您更改font-size的{{1}}，#container，it breaks。

解决此问题的明智方法包括：

Remove margin-right: -4px and then remove the whitespace between the divs in the HTML。
请勿使用32px。相反，float: left the left div, and float: right the right div。
- 如果您在容器上没有固定display: inline-block时担心it breaking，则必须清除浮动。在容器上使用height，或使用clearfix。
- With overflow: hidden（除非您有specific problems）
- With clearfix

固定内联块div，负边距和浮动浮动：-4px有什么特别之处？

1 个答案: