1

<div>2 つの 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

それらの両方にテキストを入力し（たとえそれが単なる であっても&nbsp;）、同じになるように設定しline-heightます。

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

于 2012-08-24T20:50:57.757 に答える