Question

我正在尝试将评论div元素叠加在主div元素上，但我不确定以下内容;

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

CODE

<!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>

Answer 1

正如我在上面的评论中所说，我认为你的解决方案是完全可以的。您的注释div嵌套在main中，并且绝对位于其中。我觉得这里没有黑客。

但这并不是实现这一目标的唯一方法，我会告诉你另一个，它更灵活一点。也就是说，它使您的主框和注释框允许可变高度内容（当您使用当前解决方案时，文本将在其容器外溢出）。

它基于两件事：

另一个包含类main-contents的div来包装内容。这是.main
在min-height，.main和.main-contents上使用.comments来保证您的原始尺寸，但如果需要可以展开。

<强> 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，以及另一个包含更高内容的块。

这是叠加div元素的正确方法吗？

1 个答案: