How to position two elements side by side?_问答_开发者

How to position two elements side by side?

开发者 https://www.devze.com 2022-12-11 22:06 出处：网络

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 in

相关专题：css

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.

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.

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

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.

Additionally you could hide or show these side notes without changing the layout.

This is my suggestion. Have a css class for each main, comment pair. Add float: left for both main and the comments class.

CSS Style:

 #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:

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