我在使用display-style =“ inline-block”的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的页边空白。

为什么是这样?我想不明白。同样,大多数示例都没有使用box-sizing,但是如果我删除了box-sizing,布局将再次出现问题。

我使用的是Chrome,但在FF和Safari中似乎也可以使用。

任何帮助是极大的赞赏!

问候,
麦可

最佳答案

经过一些尝试找到问题后,我敢打赌您在2个div之间有一些空白甚至是Enter键。这个问题很难发现。因此,要解决该问题,只需清除所有空白或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

关于html - 负边距右边是否必须为width + 4像素?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/22637654/

10-12 00:17
查看更多