将绝对文本对齐到父div的右下角

Question

I have a simple comment system where users can leave comments on pages. Other users can then reply to these "main comments" resulting in "sub comments". This only goes down one level (there are no "sub sub comments"). I am trying to align the "Reply" link to the bottom right of a main comment. The problem is, because the main comment div contains all the children comments, that would just align it to the bottom of the last sub comment.

I have tried doing top: 35% but as you can see in the fiddle below, depending on the amount/length of the comments, this doesn't work.

JSFiddle: http://jsfiddle.net/cqjnjy8f/

I've set sub-comment-2 to display: none . If you get rid of that you'll see what I mean about the reply link's height varying.

All I need is for it to stay at the bottom right of the red area and to stay there no matter how many sub comments there are/the length of the main comment.

Answer 1

Put the main comment in a div and add the reply button to that div. Then set position:relative to that div and position: absolute; bottom: 0 position: absolute; bottom: 0 to reply. http://jsfiddle.net/cqjnjy8f/2/

Answer 2

I think the problem here is one of structure.

You only need the "Reply" as an adjunct to the initial comment so the element (and a span would be better than a heading here), so if we use the initial comment as the parent, we can position it absolutely at the bottom.

 * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .main-comment { background-color: red; position: relative; padding-bottom: 1.5em; } .sub-comment-2 { background-color: blue; } .comment .reply { position: absolute; right: 0; bottom: 0; cursor: pointer; color: white; } .sub-comment { background-color: green; } .sub-comment-2 { background-color: blue; } 

 <div class="comment"> <h4 class="main-comment"> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vel tincidunt leo. Nam sit amet ultrices elit, vitae imperdiet massa. Maecenas luctus vulputate mauris, id consectetur sapien consectetur sed. Aliquam feugiat nibh eget risus tristique <span class="reply">Reply</span> </h4> <div class="sub-comment"> <h4> Donec blandit ex in ex ullamcorper pellentesque. Aenean a neque luctus nisl posuere hendrerit et sed nibh. Sed lacinia, orci quis dapibus venenatis, odio sem ultricies quam, in euismod ante metus ac neque. Fusce rutrum gravida ligula sit amet accumsan. Suspendisse eget congue orci </h4> </div> <div class="sub-comment-2"> <h4> Donec blandit ex in ex ullamcorper pellentesque. Aenean a neque luctus nisl posuere hendrerit et sed nibh. Sed lacinia, orci quis dapibus venenatis, odio sem ultricies quam, in euismod ante metus ac neque. Fusce rutrum gravida ligula sit amet accumsan. Suspendisse eget congue orci </h4> </div> </div> 

Answer 3

This can be resolved by adjusting the structure of your HTML, providing this is possible.

You should have the 'Reply' button within your main comment div, and then wrap the entire thing (comments, and replies to the comment) in a div container.

 .comment { background-color: red; height: 5em; position: relative; } .comment button { position: absolute; bottom:0; right: 0; } .comment-reply { background-color: blue; margin-bottom: 0.2em; } 

 <div class="container-comment"> <div class="comment"> This is a comment <button>Reply to comment</button> </div> <div class="comment-reply"> This is a reply to the comment </div> <div class="comment-reply"> This is another reply to the comment </div> </div> 

Answer 4

You want something like this:

http://jsfiddle.net/cqjnjy8f/3/

Your main issues were that you had not a good structure for what you wanted to achieve.

For example, each comment should be it's own <div> element, and all comments, either main or replies, should have a common comment class.

Regarding the Reply button, when you set the position of an element to absolute this position is absolute relative to the most immediate parent element, of the absolute positioned element, that has a relative position.

for example if I had

<div class="relative-positioned">
    <div class="static-positioned">
        <div class="absolute-positioned"></div>
    </div>
</div>

The absolute-positioned element would be positioned relative to the relative-positioned element and not the static-positioned one

Also, use <div> s instead of header tags such as h4 and h5 .

Answer 5

If you want to keep you mark-up exactly as you have it, then you can try using float: right on the .reply element.

You might want to adjust your margins on the h4 elements to improve the spacing.

Also, add clear: both to the .sub-comment rule to prevent text from wrapping around the reply button.

This solution fixes the positioning problem. You can add margins and padding to style the button as needed.

 .comment { background-color: red; position: relative; } .comment h4 { margin: 0; } .sub-comment h4 { margin-top: 2.00em; } .sub-comment { background-color: green; clear: both; } .sub-comment-2 { background-color: blue; /* display: none; */ } .comment .reply { cursor: pointer; color: white; border: 1px solid blue; margin: 0px; float: right; } 

 <div class="comment"> <h4> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vel tincidunt leo. Nam sit amet ultrices elit, vitae imperdiet massa. Maecenas luctus vulputate mauris, id consectetur sapien consectetur sed. Aliquam feugiat nibh eget risus tristique </h4> <h5 class="reply">Reply</h5> <div class="sub-comment"> <h4> Donec blandit ex in ex ullamcorper pellentesque. Aenean a neque luctus nisl posuere hendrerit et sed nibh. Sed lacinia, orci quis dapibus venenatis, odio sem ultricies quam, in euismod ante metus ac neque. Fusce rutrum gravida ligula sit amet accumsan. Suspendisse eget congue orci </h4> </div> <div class="sub-comment sub-comment-2"> <h4> Donec blandit ex in ex ullamcorper pellentesque. Aenean a neque luctus nisl posuere hendrerit et sed nibh. Sed lacinia, orci quis dapibus venenatis, odio sem ultricies quam, in euismod ante metus ac neque. Fusce rutrum gravida ligula sit amet accumsan. Suspendisse eget congue orci </h4> </div> </div> 

Answer 6

Have you tried to add a margin style to Reply class?

.reply {
position: absolute;
margin: 0 5% 5% 0}

In this way it should be located in the bottom-right part of your div.

Answer 7

Try this way: https://jsfiddle.net/cqjnjy8f/7/

<div class="comment">
    <div class="main-comment"> 
    <span>
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vel tincidunt leo. Nam sit amet ultrices elit, vitae imperdiet massa. Maecenas luctus vulputate mauris, id consectetur sapien consectetur sed. Aliquam feugiat nibh eget risus tristique
    </span>
        <a href="#" class="reply">Reply</a>
    </div>

    <div class="sub-comment">
        <span>
            Donec blandit ex in ex ullamcorper pellentesque. Aenean a neque luctus nisl posuere hendrerit et sed nibh. Sed lacinia, orci quis dapibus venenatis, odio sem ultricies quam, in euismod ante metus ac neque. Fusce rutrum gravida ligula sit amet accumsan. Suspendisse eget congue orci
        </span>
    </div>
    <div class="sub-comment-2">
        <span>
            Donec blandit ex in ex ullamcorper pellentesque. Aenean a neque luctus nisl posuere hendrerit et sed nibh. Sed lacinia, orci quis dapibus venenatis, odio sem ultricies quam, in euismod ante metus ac neque. Fusce rutrum gravida ligula sit amet accumsan. Suspendisse eget congue orci
        </span>
    </div>
</div>


.comment{
    border:1px solid #ccc;
    padding:3px;
}

.main-comment {
    display:table;
}

.sub-comment, 
.sub-comment-2{
    margin: 20px;
}

.reply {
    margin:20px 0;
    vertical-align: bottom;
    text-align:left;
    float:right;
}