CSS 如何并排放置两个元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1774556/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to position two elements side by side?
提问by FurtiveFelon
I am quite new to the world of CSS, and I've been trying to figure out how to position the .main and .comment side by side in the example at the end, with one caveat. I don't want to squeeze both into the same #container, I would like the comment to sort of "pop" out of the bounding box, and be aligned with the .main but outside of #container. The reason I want to do this is that the comment would initially be hidden and after the user clicks on something, the comment would sort of pop open.
我对 CSS 世界很陌生，我一直在尝试弄清楚如何在最后的示例中并排放置 .main 和 .comment，但有一个警告。我不想将两者都挤进同一个#container，我希望评论从边界框中“弹出”，并与 .main 对齐但在#container 之外。我想这样做的原因是评论最初会被隐藏，在用户点击某物后，评论会弹出打开。
So more specifically, I would like .main to be in a box, and .comment in another box. .comment should be to the left of .main, and the tops of each .comment should line up with their respective .main. Preferably .comment should be visually outside of #container.
更具体地说，我希望 .main 在一个框中，而 .comment 在另一个框中。.comment 应该在 .main 的左边，每个 .comment 的顶部应该与各自的 .main 对齐。最好 .comment 应该在#container 之外在视觉上。
If anyone can give me a pointer of what to do it would be much appreciated! The HTML is not set in stone, so if there is a more convenient representation, please do advise!
如果有人能给我指点一下该怎么做，将不胜感激！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>
采纳答案by cletus
Based on your comment, here is one way of achieving this:
根据您的评论，这是实现这一目标的一种方法：
#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; }
Note the use of negative margins to move the comment outside the container. I'e done a fuller example of this in negative margins in css: good tutorial and tricks site?with an example of how to put side notes on some text, which sounds a lot like what you're trying to achieve.
请注意使用负边距将注释移到容器外。我在 css中的负边距中做了一个更完整的例子：好的教程和技巧网站？举例说明如何在某些文本上添加旁注，这听起来很像您要实现的目标。
Additionally you could hide or show these side notes without changing the layout.
此外，您可以在不更改布局的情况下隐藏或显示这些附注。
回答by o.k.w
This is my suggestion. Have a css class for each main, commentpair. Add float: leftfor both mainand the commentsclass.
这是我的建议。每个main,comment对都有一个 css 类。float: left为两者main和comments班级添加。
CSS Style:
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;
}
The HTML:
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>
