css - Divアライメントが正しく機能しない

Question

css

#content2
    {
    clear:both;
    width:1024px;
    height:auto;
        position:relative;
    }
    #content2 div:first-child
    {
    background:#E4ECF7;
    width:445px;
    height:25px;
    margin:15px 0px 0px 223px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    border:1px solid #E0DCD1;
    padding:5px 0px 0px 5px;
    position:absolute;
    }
    #content2 div:last-child
    {
    width:1024px;
    height:200px;
    position:absolute;
    border:1px solid #E0DCD1;
    clear:both;
    }

HTML

<div id="content2">
<div>content</div>
<div>content</div>
</div>

結果

div1 はdiv2内に表示されています

私は欲しい

div1  then
div2

私を助けてください。

Answer 1

位置絶対を使用する理由、最後の子の明確なプロパティは必要ありません

#content2
{
clear:both;
width:1024px;
height:auto;
    position:relative;
}
#content2 div:first-child
{
background:#E4ECF7;
width:445px;
height:25px;
margin:15px 0px 0px 223px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #E0DCD1;
padding:5px 0px 0px 5px;
/*position:absolute;*/
}
#content2 div:last-child
{
width:1024px;
height:200px;
/*position:absolute;*/
border:1px solid #E0DCD1;
/*clear:both;*/
}

floatプロパティを使用した後でない限り、divはデフォルトでクリアされます

Answer 2

両方の子divから絶対位置を削除します。

Answer 3

私はあなたがこのように見えると思います：-http：//tinkerbin.com/3qRLgscO

実際、CSSを少し複雑にしました。を使用せずに、非常に単純なCSSを使用して目的の結果を得ることができますpositioning。

また、使用している場合はfloat、clearフロートdivをクリアするためにを使用する必要があります。それ以外の場合は、clearプロパティを使用する必要はありません。

これがあなたの簡単なコードです私はあなたのCSSにいくつかの簡単な変更を加えています.....

HTML

<div id="content2">
<div>div1</div>
<div>div2</div>
</div>

CSS

#content2 {
    background: none repeat scroll 0 0 red;
    height: 200px;
    width: 1024px;
}
#content2 div:first-child {
    background: none repeat scroll 0 0 #E4ECF7;
    height: 45px;
}

#content2 div:last-child {
    background: none repeat scroll 0 0 yellow;
    border: 1px solid #E0DCD1;
    height: 45px;
}

これがお役に立てば幸いです。

Answer 4

使用している場合はPosition: absolute;、両方のdivのマージンを指定します。

例えば：

#content2 div:last-child
    {
    width:1024px;
    height:200px;
    position:absolute;
    margin-top: xxx; /* specify the top margin */
    border:1px solid #E0DCD1;
    clear:both;
    }

Answer 5

divクラスで次のプロパティを使用できます。

float:left
clear:right;