Question

我似乎总是遇到CSS布局问题。在页面上放置'div'元素的最佳方法是什么。例如，我创建了以下内容：

请参阅我的jsfiddle：http://jsfiddle.net/JJw7c/3/

<!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>Example</title>
</head>
<body>
    <div class="container">
        <div class="header">
            this is the header
            <div class="menu">
                menu goes here
            </div>
        </div>
        <div class="main">
            main content goes here
        </div>
    </div>
    <div class="footer">
        footer
    </div>
</body>
</html>

body
{
    margin:10px;
}
.container
{
    border:1px solid black;
    min-height:400px;
    width:100%;
}

.header
{
    border:1px solid red;
    height:100px;
}

.menu
{
    border:1px solid green;
    height:20px;
    width:50%;
    float:right;
}

.main
{
    border:1px solid grey;
    min-height:100px;
    margin:20px;
}

.footer
{
    border:1px solid green;
    width:100%;
    padding-top:10px;
}

让我们说我想在标题的右下方放置一个图标，但我想要具体。

我是否使用相对位置然后顶部：20px等等。或者位置：绝对？或者我使用保证金权利：200px？或者我可以使用浮动然后绝对位置？＆LT;＆LT;＆LT;请你解释我什么时候使用这些，如果可能的话，用每个例子更新我的jsfiddle。

由于

Answer 1

使用

position:absolute;
bottom:0px;
right:0px;

到图标类，然后将position:relative;添加到.header

Answer 2

您可以使用职位absolute + relative
将position: relative分配给.header元素，然后使用position: absolute添加您的图标：top和应用于该图标的left属性将被引用到{ {1}}元素（因为它是图标的第一个非静态元素父元素）

这种技术的主要优点是图标的存在不会影响标题内其他元素的所有位置（因为它是绝对定位的）

使用css定位div元素

2 个答案: