如何在div旁边制作div答案

【问题标题】：how to make div beside div如何在div旁边制作div
【发布时间】：2013-05-30 23:54:50
【问题描述】：

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
}

如何让flag div出现在header div里面的adv div旁边？

【问题讨论】：

标签： css html tags

【解决方案1】：

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

【讨论】：

不要忘记给父级（在本例中为#header）溢出：隐藏；所以它会掩盖浮动div，因为它们将来可能会动态改变它们的大小。避免使用父级的静态高度。

【解决方案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;
    }

【讨论】：

【解决方案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;
}

【讨论】：