1

我试图将两个<div>s 彼此定位，但似乎当我<div>在左侧输入文本时，它被推下。这几乎就像它上面有一个元素，但那里没有对象，而它应该与它内联的对象留在正确的位置。

HTML 代码：

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

谢谢 ：）

4

4 回答 4

1

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

jsFiddle 示例

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

于 2012-08-24T20:49:57.670 回答
0

添加到每个 div css

position:relative;
float:left;

http://jsfiddle.net/MkEWp/

于 2012-08-24T20:47:11.867 回答
0

添加float:left到左侧的 div。

于 2012-08-24T20:47:21.393 回答
0

将文本放入它们中（即使它只是 a &nbsp;）并将它们设置line-height为相同。

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

于 2012-08-24T20:50:57.757 回答