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にネストされ、その中に絶対的に配置されます。ここにはハックはありません。

しかし、それを達成する唯一の方法ではありません。もう少し柔軟な方法を紹介します。つまり、メインボックスとコメントボックスで可変の高さのコンテンツを使用できるようになります（現在のソリューションでは、テキストがコンテナの外にオーバーフローします）。

それは2つのことに基づいています：

  1. main-contentsコンテンツをラップするクラスを持つ別のdiv 。の子です.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 に答える