如何在其他 div 中调整和定位 div答案

【问题标题】：How to adjust and position divs inside other div如何在其他 div 中调整和定位 div
【发布时间】：2013-11-17 20:39:41
【问题描述】：

我正在学习 HTML，我正在尝试制作一个包含有用链接的标题。我用一个大 div 和 4 个 div 做了这个，但小 div 不在那个 div 里面，在这里看到它：My webpage

我的css代码是：

#header{
        width:1200px;
        height:25px;
        background-color:#0A475C;
        position:absolute;
        left:50%;
        margin-left:-600px;
        -moz-border-radius: 15px 15px 15px 15px;
        webkit-border-radius: 15px 15px 15px 15px;
        border-radius: 15px 15px 15px 15px;
}
#login{
        width:300px;
        position:relative;
        line-height:25px;
        left:0px;
        text-align:center;
}
#allroms{
        width:400px;
        line-height:25px
        position:relative;
        left:300px;
        text-align:center;
}
#sobremi{
        width:300px;
        line-height:25px;
        position:relative;
        left:600px;
        text-align:center;
}
#downloads{
        width:300px;
        position:relative;
        line-height:25px;
        left:900px;
        text-align:center;
}

还有html：

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/pagina.css">
        <title>Mi página</title>
    </head>
    <body>
        <div id="header">
            <div id="login"><a href="pagina/login.html">Log-in</a></div>
            <div id="allroms"><a href="pagina/roms.html">Todas las ROMS</a></div>
            <div id="sobremi"><a href="pagina/sobremi.html">Sobre mí</a></div>
            <div id="downloads"><a href="pagina/downloads.html">Descargas</a></div>
        </div>
    </body> 
</html>

刚刚解决了，不得不改变位置：相对；到位置：绝对；

【问题讨论】：

标签： html css web

【解决方案1】：

在某事中使用绝对定位就像菜单一样简单，这不是最佳做法。在这种情况下，玩具可以简单地在您的“小”div 上使用float: left，并通过添加一些包含float: left 和边距或某物的class 来定位它。

如果您以后想在菜单中添加一些新项目，这将非常有用。

【讨论】：

【解决方案2】：

你必须先了解定位。

您的 child div's 应该是 absolute 和父 div relative。

有关示例，请参阅给定的链接。 Positioning examples:

【讨论】：

【解决方案3】：

父 (#header) 不应该是绝对的，而是相对的。而且里面的div可以是绝对的。但这种定位方式不推荐用于菜单。

宁可使用float，例如：http://jsfiddle.net/VKewr/

【讨论】：