我有一个简单的评论系统，用户可以在页面上留言。然后其他用户可以回复这些＆＃34;主要评论＆＃34;导致＆＃34;子评论＆＃34;。这只会降低一个级别（没有＆＃34;子子评论＆＃34;）。我正在尝试调整＆＃34;回复＆＃34;链接到主评论的右下角。问题是，因为主注释div包含所有子注释，它只是将它与最后一个子注释的底部对齐。
我已尝试过top: 35%，但正如您在下面的小提琴中所看到的，根据评论的数量/长度，这不起作用。
JSFiddle：http://jsfiddle.net/cqjnjy8f/
我已将sub-comment-2设为display: none。如果你摆脱它，你会看到我对回复链接的高度变化的意思。
所有我需要的是它留在红色区域的右下角并留在那里，无论有多少子评论/主要评论的长度。
答案 0 :(得分：0)
将主评论放在div中，并将回复按钮添加到该div。然后将position:relative设置为该div并position: absolute; bottom: 0进行回复。
http://jsfiddle.net/cqjnjy8f/2/
答案 1 :(得分：0)
我认为这里的问题是结构问题。
您只需要＆＃34;回复＆＃34;作为初始注释的附件，所以元素（和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>
答案 2 :(得分：0)
这可以通过调整HTML的结构来解决，前提是这是可能的。
你应该得到回复＆＃39;主评论div中的按钮，然后在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>
答案 3 :(得分：0)
你想要这样的东西：
http://jsfiddle.net/cqjnjy8f/3/
你的主要问题是你没有一个好的结构来实现你想要达到的目标。
例如，每个评论都应该是它自己的<div>元素，所有评论（主要或回复）都应该有一个共同的comment类。
关于“回复”按钮，当您将元素的位置设置为absolute时，此位置相对于absolute定位元素的最直接父元素是绝对的，具有{{1位置。
例如，如果我有
relative <div class="relative-positioned">
<div class="static-positioned">
<div class="absolute-positioned"></div>
</div>
</div>
元素相对于absolute-positioned元素定位，而不是relative-positioned元素
另外，请使用static-positioned代替<div>和h4等标题标记。
答案 4 :(得分：0)
如果您希望完全按照标记进行标记，则可以尝试在float: right元素上使用.reply。
您可能希望调整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>
答案 5 :(得分：0)
您是否尝试为回复课程添加保证金样式？
.reply {
position: absolute;
margin: 0 5% 5% 0}
这样它应该位于div的右下角。
答案 6 :(得分：0)
尝试这种方式：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;
}