Question

我对CSS世界很陌生，我一直试图弄清楚如何在最后的例子中并排放置.main和.comment，但有一点需要注意。我不想将两者都压缩到相同的#container中，我希望评论从边界框中排出“pop”，并与.main对齐，但在#container之外。我想这样做的原因是评论最初会被隐藏，并且在用户点击某些内容之后，评论会弹出打开。

更具体地说，我希望.main在一个盒子里，而.comment在另一个盒子里。 .comment应位于.main的左侧，每个.comment的顶部应与其各自的.main对齐。优选地，评论应该在#container之外的视觉上。

如果有人能给我指示做什么，我将不胜感激！ HTML不是一成不变的，所以如果有更方便的表示，请提出建议！

<html>
    <head>
        <style type="text/css">
            #container{
                margin-left:auto;
                margin-right:auto;
                width:700px;
                background-color:#eee9e9;
                padding:5px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div>
                <p class="main">Some content Some contentSome contentSome contentSome contentSome contentSSSSome content Some contentSome contentSome contentSome contentSome content ome content Some contentSome contentSome contentSome contentSome content ome content Some contentSome contentSome contentSome contentSome content ome content Some contentSome contentSome contentSome contentSome content</p>

                <p class="comment">Comments: some comments</p>
            </div>
            <div>
                <p class="main">Some content Some contentSome contentSome contentSome contentSome contentSSSSome content Some contentSome contentSome contentSome contentSome content ome content Some contentSome contentSome contentSome contentSome content ome content Some contentSome contentSome contentSome contentSome content ome content Some contentSome contentSome contentSome contentSome content</p>
                <p class="comment">Comments: some comments</p>
            </div>
        </div>

    </body>
</html>

Answer 1

根据您的评论，以下是实现此目的的一种方法：

#container { margin-left: 200px; width: 750px; } /* this is the comment area */
#container p { float: right; }
#container p.main { margin: 10px; width: 730px; } /* 730 + 2*10 = 750 */
#container p.comment { margin-left: -160px; width: 130px; border: 1px solid black; }

请注意使用负边距将注释移到容器外部。我在negative margins in css: good tutorial and tricks site?中做了一个更全面的例子，其中有一个如何在一些文本上添加注释的例子，这听起来很像你想要实现的。

此外，您可以在不更改布局的情况下隐藏或显示这些旁注。

Answer 2

这是我的建议。为每个main，comment对提供css课程。为float: left和main类添加comments。

CSS样式：

 #container{
        margin-left:auto;
        margin-right:auto;
        width:700px;
        background-color:#eee9e9;
        padding:5px;
  }
  div.item {
       clear: both;
  }
  div.item p {
       float: left;
       width: 400px;
  }
  div.item p.comment {
       padding-left: 10px;
       width: 260px;
  }

HTML：

   <div id="container">
        <div class="item">
            <p class="main">Some content Some contentSome contentSome
            <p class="comment">Comments: some comments</p>
        </div>
        <div class="item">
            <p class="main">Some content Some contentSome contentSome
            <p class="comment">Comments: some comments</p>
        </div>
    </div>

如何并排放置两个元件？

2 个答案: