Question

我使用display-style =＆＃34; inline-block＆＃34;时遇到2列布局问题。我有这个HTML：

<div class="A">tekst</div>
<div class="B">tekst</div>

用css：

.A {
   background-color: blue;
   height: 200px;
   width: 250px;
   padding-left: 25px;
   margin-right: -254px;
   display: inline-block;
   vertical-align: top;
   position: relative;
   box-sizing: border-box;
   z-index: 1;
}

.B {
   background-color: red;
   height: 400px;
   width: 100%;
   padding-left: 300px;
   display: inline-block;
   vertical-align: top;
   position: relative;
   box-sizing: border-box;
}

http://jsfiddle.net/eaFn9/9/

但正如您所看到的，第一个div的宽度为250像素，但在显示第二个div之前需要-254px的边距右边＃34; next＆＃34;它。

这是为什么？我想不明白。此外，大多数示例不使用box-sizing，但如果我删除它，布局会再次出错。

我正在使用Chrome，但它似乎在FF和Safari中的工作原理相同。

非常感谢任何帮助！

此致迈克尔

Answer 1

在一些尝试找到问题后，我打赌你在2个div之间有一些空白或甚至一些Enter键。这个问题很难找到。所以要解决这个问题，你只需要清除所有空白或输入击键，这样2个div标签就必须彼此靠近：

<!-- place 2 divs close to each other without anything between. -->
<div class="A">tekst</div><div class="B">tekst</div>

以下是expectedly working fiddle

Answer 2

对于有同样问题的人：

似乎添加＆＃39; font-size：0＆＃39;到父容器修复它为每个浏览器，而不是Safari for Windows（所有其他Safaris按预期工作）。如果你想在其中包含文本，请确保将字体大小重置为子div内的合理值（因此在我的示例中，div和A都将具有font-size：14px;例如，以显示文本）。我假设（我还没有做过任何研究）这是Safari for Windows中的一个错误，因为它是唯一一个有这个问题的Safari。

负边距右边需要宽度+4像素？

2 个答案: