我有一個簡單的評論系統，用戶可以在頁面上留言。然後其他用戶可以回覆這些「主要評論」，從而產生「子評論」。這隻有一個級別（沒有「子子註釋」）。我正在嘗試將「回覆」鏈接對準主評論的右下角。問題是，因爲主註釋div包含所有的子註釋，所以它會將它對齊到最後一個子註釋的底部。將絕對文本對齊到父div的右下角
我試過做top: 35%，但正如你可以在下面看到的小提琴，根據評論的數量/長度，這是行不通的。
的jsfiddle：http://jsfiddle.net/cqjnjy8f/
我已經設置sub-comment-2到display: none。如果你擺脫了這一點，你會看到我的意思是關於回覆鏈接的高度變化。
我所需要的只是讓它留在紅色區域的右下角並留在那裏，不管有多少個子註釋/主註釋的長度。
將主註釋放在div中，並將回覆按鈕添加到該div。然後將position:relative設置爲該格，position: absolute; bottom: 0進行回覆。 http://jsfiddle.net/cqjnjy8f/2/
我認爲這裏的問題是結構之一。
您只需要「回覆」作爲初始評論的附件，因此元素（和span會比這裏的標題更好），所以如果我們使用初始評論作爲父項，我們可以絕對定位它在底部。
* {
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>這可以通過調整你的HTML的結構，提供這是可能得到解決。
你應該在你的主註釋div中有'Reply'按鈕，然後在div容器中包裝整個東西（註釋和回覆註釋）。
.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>你想是這樣的：
http://jsfiddle.net/cqjnjy8f/3/
你的主要問題是，你有沒有良好的結構，你想達到的目標。
例如，每個評論應該是它自己的<div>元素，並且所有評論（主要或答覆）都應該有一個共同的comment類。
關於回覆按鈕，當你一個元素的位置設置爲absolute這個位置是相對於最直接的父元素絕對的，absolute定位的元素，具有relative位置。
例如，如果我有
<div class="relative-positioned">
<div class="static-positioned">
<div class="absolute-positioned"></div>
</div>
</div>
的absolute-positioned元件將相對於relative-positioned元件被定位，而不是static-positioned一個
此外，使用<div>！而非標題標記如h4和h5 。
如果您想讓您的標記完全符合您的要求，那麼您可以嘗試在.reply元素上使用float: right。
您可能要調整的h4元素的利潤率改善空間。
此外，添加clear: both到.sub-comment規則，以防止文本來自各地的回覆按鈕包裝。
此溶液固定定位的問題。您可以添加邊距和填充以根據需要設置按鈕的樣式。
.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>您是否嘗試過增加邊距的風格，回覆類？
.reply {
position: absolute;
margin: 0 5% 5% 0}
這樣，它應該位於div的右下角。
試試這個方法：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;
}