0

1 つの div をページの中央に配置し、もう 1 つの div を次のようにウィンドウの右側に取り付けようとしています。

            header
   |----------------------|
   |      _______    _____|
   |     |       |   |   ||
   |     |       |   |   ||
   |     | div a |   | b ||
   |     |       |   |   ||
   |     |_______|   |___||
   |----------------------|
            footer

div a は margin: 0 auto; を使用して配置されます。div b は div a と同じ高さである必要があります。これを position:absolute で動作させることはできますが、div の下にフッターが表示されます。これが私が現在持っているものです：

#a{
    margin: 0 auto;
    width: 800px;
    border: 1px solid green;
    padding-top: 30px;
    padding-left: 10px; padding-right: 10px;
}

#b{
    position: absolute;
    display:block;
    right:0;
    width: 300px;
    border: 1px solid blue;
    padding-right: 15px;
    margin-left: 10px;
    background-color: #fff;
}

現在、div b は右側にありますが、div a の下にあります。フッターが絶対配置の影響を受けずに、これらを垂直方向に揃えるにはどうすればよいですか?

4

2 に答える 2

0

あなたの問題は、絶対に配置された div に相対的に配置された親がないことです。

これを試すことができます：

.container
{
 position:relative;
 }

#a
{
margin: 0 auto;
width: 800px;
border: 1px solid green;
padding-top: 30px;
padding-left: 10px; padding-right: 10px;
}

#b
{
position: absolute;
display:block;
right:0;
top:0;
width: 300px;
border: 1px solid blue;
padding-right: 15px;
margin-left: 10px;
background-color: #fff;
}

次に、html は次のようになります。

<div class="container">
    <div id="a"></div>
    <div id="b"></div>
</div>
于 2013-08-10T20:34:58.817 に答える
0

div a が画面の上から 30px にあるように見えます。div b は絶対配置なので、上から位置を設定するだけです。#bこれをcssに追加します。

#b{
    position:absolute;
    display:block;
    right:0px;
    top:30px;
    ...
}

これで同じ高さになります。(div a が実際には上から 30px であると仮定)

于 2013-08-10T20:30:43.303 に答える