0

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> This is my site </title>
    <link rel="stylesheet" type="text/css" href="StyleSheet.css">
</head>
<body>
    <div id="bigger">
        <div id="header">
            <div id="adv">                        
            </div>  
            <div id="flag">
            </div>      
        </div>
    </div>
</body>
</html>

CSS

#bigger
{
    height:1280px;
    width:880px;
    margin:0px 0px 0px 0px;    
    position:absolute    
}

#header
{
    background-color:Blue;
    height:10%;
    width:100%;
    position:absolute
}

#adv
{
    background-color:Yellow;
    height:100%;
    width:35%    
}

#flag
{
    background-color:Red;
    height:100%;
    width:65%;    
    float:right
}

如何使标志 div 出现在标题 div 内的 adv div 旁边？

4

3 回答 3

3

#adv需要float:left，所以它向左浮动（并且#flag向右浮动，在它旁边，因为float: right）。

于 2013-05-31T00:01:43.347 回答
1

尝试这个

#header
    {
        background-color:Blue;
        height:10%;
        width:100%;
        position:relative
    }
    #flag
    {
    background-color:Red;
    height:100%;
    width:65%;  
    position:absolute;
        top:0;
        right:0;
    }
于 2013-05-31T00:08:57.230 回答
0

试试这个：通常：（如果我错了，请有人纠正我）：

宽度和高度应该从一开始就设置为像素高度宽度而不是百分比，因为以后代码会更容易使用。此外，我确信这两个元素都应该浮动left，因为这样代码将再次变得更容易使用，并且将遵循更好的代码约定。此外，我添加了边距以便于查看。如果您愿意，您可以随时删除它们。代码：

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> This is my site </title>
    <link rel="stylesheet" type="text/css" href="example1.css">
</head>
<body>
    <div id="bigger">
        <div id="header">
            <div id="adv">                        
            </div>  
            <div id="flag">
            </div>      
        </div>
    </div>
</body>
</html>

CSS：

#bigger
{
    height:1280px;
    width:880px;
    margin:0px 0px 0px 0px;    
    position:absolute    
}

#header
{
    background-color:Blue;
    height:90px;
    width:1290px;
    overflow: hidden;
}

#adv
{
    background-color:Yellow;
    height:80px;
    width:840px;  
    margin: 5px;
    float: left;
}

#flag
{
    background-color:Red;
    height:80px;
    width:420px;   
    margin: 5px; 
    float:left;
}
于 2013-05-31T00:18:29.387 回答