Question

我正在尝试将两个<div>放在彼此之间，但是当我将文本输入到左侧的<div>时，它会被推下来。它几乎就像它上面有一个元素，但那里没有任何对象，而它应该是内嵌的那个元素保留在正确的位置。

HTML code：

<div id="header_div">

 <div id="header_div_left">Home</div>

 <div id="header_div_right"></div>

</div>

CSS代码：

#header_div {
    width: 980px;
    height: 125px;
    padding: 10px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    border: 2px solid #A5A5A5;
    background-color: #191919;
    margin-left: auto;
    margin-right: auto;
    border-top: 4px solid #E00000;
}

#header_div_left {
    display: inline-block;
    width: 290px;
    height: 120px;
    margin-right: 5px;
    line-height: 120px;
    text-align: center;
    border: 2px solid #A5A5A5;
    background-color: #191919;
    border-bottom-left-radius: 10px;
}

#header_div_right {
    display: inline-block;
    width: 655px;
    height: 120px;
    margin-left: 5px;
    border: 2px solid #A5A5A5;
    background-color: #191919;
    border-bottom-right-radius: 10px;
}

谢谢：）

Answer 1

将vertical-align:top添加到内部div。

<强> jsFiddle example

由于您将内部div设置为具有内联块显示，因此您希望将它们与父div的顶部对齐。

Answer 2

添加到每个div css

position:relative;
float:left;

http://jsfiddle.net/MkEWp/

Answer 3

将float:left添加到左侧div。

Answer 4

将文字放入其中（即使只是 ）并将line-height设置为相同。

http://jsfiddle.net/9wCnu/1/

左边的方框被向下推

4 个答案: