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

默认情况下，

div被清除，除非使用了浮动属性

Answer 2

从两个子div中删除绝对位置......

Answer 3

如果您使用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 4

我认为你看起来像这样： - 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 5

您可以在div类中使用以下属性。

float:left
clear:right;

Div对齐不正常

5 个答案: