Question

我已经搜索了很多关于为什么会出现这种情况的解释。

基本上我设置了2列，每列都有一个导航栏和内容区域。

CSS

#mainContainer {
    background-color: lightblue;
    width: 100%;
    height: 300px;
}
#leftContainer, #rightContainer {
    border: 1px solid black;
    display: inline-block;
    background-color: red;
    width: 40%;
    height: 100%;
}
#leftBar, #rightBar {
    background-color: purple;
    height: 10%;
}
#leftMain, #rightMain {
    background-color: grey;
    height: 90%;
}

HTML

<div id="mainContainer">
    <div id="leftContainer">
        <div id="leftBar"></div>
        <div id="leftMain"></div>
    </div>
    <div id="rightContainer">
        <div id="rightBar"></div>
        <div id="rightMain"></div>
    </div>
</div>

每当我只在一列中向导航栏添加元素时，它会将整个列向下移动。 http://jsfiddle.net/qn6rs0q2/3/

<div id="mainContainer">
    <div id="leftContainer">
        <div id="leftBar">
            <button>Test</button>
        </div>
        <div id="leftMain"></div>
    </div>
    <div id="rightContainer">
        <div id="rightBar"></div>
        <div id="rightMain"></div>
    </div>
</div>

但如果我将另一个元素添加到另一列，它们会再次对齐。 http://jsfiddle.net/qn6rs0q2/5/

<div id="mainContainer">
    <div id="leftContainer">
        <div id="leftBar">
            <button>Test</button>
        </div>
        <div id="leftMain"></div>
    </div>
    <div id="rightContainer">
        <div id="rightBar">
            <button>Test 2</button>
        </div>
        <div id="rightMain"></div>
    </div>
</div>

为了澄清，我不是在寻找解决方案来解决这个问题。相反，我希望有人可以解释为什么它的行为背后的根本原因。提前谢谢。

Answer 1

这是因为内联元素的默认垂直对齐方式是基线。如果将垂直对齐设置为两侧的顶部（或中间），则它们会根据需要排列：

#leftContainer, #rightContainer {
    border: 1px solid black;
    display: inline-block;
    background-color: red;
    width: 40%;
    height: 100%;
    vertical-align:top;
}

<强> jsFiddle example

儿童元素转移父div

1 个答案: