Question

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旁边？

Answer 1

#adv需要float:left，因此它会浮动到左侧（而#flag会浮动到右侧，旁边是float: right）。

Answer 2

试试这个

#header
    {
        background-color:Blue;
        height:10%;
        width:100%;
        position:relative
    }
    #flag
    {
    background-color:Red;
    height:100%;
    width:65%;  
    position:absolute;
        top:0;
        right:0;
    }

Answer 3

试试这个：通常情况下:( 有人请纠正我，如果我错了）：

宽度和高度应该从像素高度宽度开始设置而不是百分比，因为代码以后更容易使用。此外，我确信这两个元素都应该浮动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;
}

如何在div旁边制作div

3 个答案: