CSS定位70-30与内联块

Question

我的定位main-bar,并side-bar用70-30比为下:的jsfiddle

.main-bar, .side-bar{
	position: relative;
	margin:0; padding: 0;
	outline: 0;
	display: inline-block;
	border:none;
    background:#CCC
}
.main-bar{width: 70%}
.side-bar{width: 30%}

/* This Works

.side-bar{width: 29%}

*/

<div class="main-bar">
    I am the King!
</div>

<div class="side-bar">
   I am not less!
</div>

有趣的是,它适用于70-29比率.我错过了什么？

Answer 1

您必须删除div之间的空白区域,并且不允许内联块正确对齐.

.main-bar, .side-bar {
    position: relative;
    margin: 0;
    padding: 0;
    outline: 0;
    display: inline-block;
    border: none;
    background: #CCC;
}
.main-bar {
    width: 70%;
}
.side-bar {
    width: 30%;
}

<div class="main-bar">
    I am the King!
</div><!--

--><div class="side-bar">
   I am not less!
</div>

参考:战斗内联块元素之间的空间