Question

我定位main-bar和side-bar的{{1}}比例如下：JSFIDDLE

70-30

.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>比率一起使用。我错过了什么吗？

Answer 1

您必须删除div之间的空格，因为它也会发生并且不允许内嵌块正确对齐。

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

参考：Fighting the Space Between Inline Block Elements

Answer 2

这是因为您需要的内联块元素之间的空格使用0属性font-size使其成为body{ font-size: 0; } .main-bar, .side-bar{ position: relative; margin:0; padding: 0; outline: 0; display: inline-block; font-size: 14px; border:none; background:#CCC } .main-bar{width: 70%} .side-bar{width: 30%}，如下所示

{{1}}

Working Fiddle

Answer 3

我建议在这些情况下使用float。

.main-bar, .side-bar{
    margin:0; padding: 0;
    outline: 0;
    border:none;
    background:#CCC
    float: left;
}
.main-bar{width: 70%}
.side-bar{width: 30%}

Answer 4

 .main-bar, .side-bar{
            position: relative;
            margin:0; padding: 0;
            outline: 0;
            display: inline-block;
            border:0;
            background:#CCC;
            float:left;
        }

内联元素：

尊重左派和正确的边距和填充，但不是顶部和顶部底
无法设置宽度和高度
允许其他元素坐下他们的左右。

块元素：

尊重所有这些
在块元素之后强制换行。

CSS定位70-30与内联块

4 个答案: