3

我对这个盒子模型有疑问。我只遇到了 Blackberry 4.6 的问题，但它也发生在 jsbin/jsfiddle 上。这 2 个 div 应该是 50%，因此彼此直接相邻，但最后一个正在崩溃。

jsbin：http: //jsbin.com/oyujof/1/edit

提前致谢。

4

5 回答 5

8

当涉及内联和内联块元素时，空格很重要。删除或注释掉 div 之间的空格。

澄清：空格是换行符和 div 之间的空格：

  </div>\n
  __<div class="nav-button">

当您使用 inline 或 inline-block 时，这些将呈现为单个空格。

于 2013-01-10T22:13:49.380 回答
1

空白有宽度，所以你的总布局是 50% + space_width + 50%, > 100% 所以第二个 div 中断。删除空格，或将宽度设置为 49%。

于 2013-01-10T22:15:45.543 回答
1

虽然float可能会出现问题，但在这种情况下使用浮点数很简单，并且可能是您在清理空白和/或 49% 不是一个选项时的唯一选择。

.nav-button {
  float: left;
  display: block;
  width: 50%;
}

更新 jsbin：http: //jsbin.com/oyujof/23/

于 2013-01-10T22:18:38.603 回答
1

您只需要指定规则.nav-to以及将.nav-button它们浮动到左边。这是用您提供的 HTML 修复它的 CSS：

.nav-to {
        width: 50%;
        float:left;
    .nav-button {
        width: 50%;
        float:left;

        &:last-child {
            text-align: right;
        }
    }
}

http://jsbin.com/oyujof/32/edit

于 2013-01-10T22:19:22.117 回答
-1

这可能不是最好的答案，但如果您将每个设置为 49%，而不是 50%，那么它会起作用。

于 2013-01-10T22:16:51.130 回答