1

我试图将评论div元素覆盖在主要div元素上，但不确定以下内容；

  1. 它是否正确？
  2. 有没有更好的方法来实现它？

可以在http://jsfiddle.net/fTbP5/找到代码示例

代码

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

1 回答 1

2

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

但这不是实现这一目标的唯一方法，我将向您展示另一种更灵活的方法。也就是说，它使您的主框和评论框允许可变高度的内容（而使用您当前的解决方案，文本会溢出到它们的容器之外）。

它基于两件事：

  1. 另一个带有类的 divmain-contents来包装内容。这是一个孩子.main
  2. 使用min-heighton和.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;    
}​

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

于 2012-06-17T22:47:53.710 回答