html - 这是覆盖 div 元素的正确方法吗？

我试图将注释 div 元素覆盖在主 div 元素上，但是我不确定以下内容；

这是正确的吗？
有没有更好的方法来实现它？

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type=" content="text/html; charset=UTF-8" />
    <meta http-equiv="content-language" content="en-us" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="copyright" content="&copy; 2012" />

    <title>sample layout</title>

    <base href="" />

    <link rel="stylesheet" type="text/css"  media="all" href="" />

    <style type="text/css" media="all">

        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            background-color: #eeeeee;
            font-family: Arial, Verdana, sans-serif;
            color: #ffffff;
        }

        #content {
            width: 700px;
            margin-top: 10px;
            margin-right: auto;
            margin-bottom: 10px;
            margin-left: auto;
            border-width: 1px;
            border-color: #ffffff;
            border-style: solid;
            overflow: auto;
            padding-top: 40px;
            padding-bottom: 40px;
        }

        #header {
            font-size: 1em;
            color: #FFC700;
            margin-left: 100px;
            margin-bottom: 20px;
        }

        .main {
            float: left;
            width: 300px;
            height: 300px;
            background-color: #00ACED;
            margin-left: 100px;
            padding: 20px;
            position: relative;
        }

        .comments {
            width: 320px;
            background-color: black;
            position: absolute;
            top: 305px;
            left: 0px;
            padding: 10px;
        }

        .shoutbox {
            float: left;
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-left: 50px;
            margin-bottom: 20px;
        }

        .border {
            border-width: 15px;
            border-color: #ffffff;
            border-style: solid;    
        }


    </style>

    <script type="text/javascript">


    </script>
</head>

<body>
    <div id="container">
        <div id="content">
            <div id="header"><h1>Title</h1></div>
            <div class="main border">
                Hi {Name}, <br /> Your details are.
                <div class="comments">comments</div>
            </div>
            <div class="shoutbox border">shoutbox1</div>
            <div class="shoutbox border">shoutbox2</div>
        </div>
    </div>

</body>
</html>

最佳答案

正如我在上面的评论中所说，我认为您的解决方案完全没问题。您的评论 div 嵌套到 main 中，并且绝对定位在其中。我在这里看不到黑客。

但这不是实现该目标的唯一方法，我将向您展示另一种更灵活的方法。即，它使您的主框和评论框允许可变高度的内容(而对于您当前的解决方案，文本会溢出其容器)。

它基于两件事:

另一个带有 main-contents 类的 div 来包装内容。它是 .main
在 .main、.main-contents 和 .comments 上使用 min-height，以保证您的原始尺寸，但如果需要则向下扩展。

HTML

<div class="main border">
    <div class="main-contents">
        Hi {Name}, <br /> Your details are.
    </div>
    <div class="comments">comments</div>
</div>

CSS

.main {
    width: 340px;
    min-height: 340px;
    background-color: #00ACED;
    margin-left: 100px;
}

.main-contents {
    padding: 20px;
    min-height: 262px;
}

.comments {
    background-color: black;
    padding: 10px;
    min-height: 18px;
}

.border {
    border-width: 15px;
    border-color: #ffffff;
    border-style: solid;    
}

为了证明这一点，我设置了一个 live example显示您的原始内容，以及下面有更高内容的另一个 block 。

关于html - 这是覆盖 div 元素的正确方法吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11074986/

html - 这是覆盖 div 元素的正确方法吗？

上一篇：css - 我怎样才能使 CSS 背景图像居中，就好像图像具有不同的宽度一样(不切断 bgimg)？

下一篇：html - 在没有javascript的情况下悬停时更改div及其 sibling 的颜色