我在使用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/