0

我似乎总是对 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 等等等..还是位置：绝对？还是我使用margin-right:200px？或者我可以使用浮动然后定位绝对？<<< 请你解释一下我什么时候会使用这些，如果可能的话，用每个例子更新我的jsfiddle。

谢谢

4

2 回答 2

3

利用

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

到图标类并添加position:relative;到 .header

于 2012-05-15T08:31:18.020 回答
2

您可以将位置absolute + relative
分配position: relative给.header元素，然后在 using position: absolute:中添加您的图标，top并且left应用于图标的属性将被引用到该header元素（因为它是图标的第一个非静态元素父级）

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

于 2012-05-15T08:28:42.863 回答