將絕對文本對齊到父div的右下角

Question

我有一個簡單的評論系統，用戶可以在頁面上發表評論。 然后其他用戶可以回復這些“主要評論”，從而得到“子評論”。 這僅下降了一層（沒有“子子注釋”）。 我正在嘗試將“回復”鏈接與主要評論的右下角對齊。 問題在於，由於主注釋div包含所有子注釋，因此只能將其與最后一個子注釋的底部對齊。

我嘗試做top: 35%但是正如您在下面的小提琴中看到的那樣，根據評論的數量/長度，這是行不通的。

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

我將sub-comment-2為display: none 。 如果您擺脫了這一點，您會發現我對回復鏈接的高度變化的意思。

我需要的是，無論它有多少子注釋/主注釋的長度，它都應留在紅色區域的右下角並保持在該位置。

Answer 1

將主要評論放在div中，然后將回復按鈕添加到該div中。 然后設置position:relative對於該div和position: absolute; bottom: 0 position: absolute; bottom: 0回復。 http://jsfiddle.net/cqjnjy8f/2/

Answer 2

我認為這里的問題是結構之一。

您僅需要將“ Reply”作為初始注釋的附件，因此該元素（並且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> 

Answer 3

只要有可能，可以通過調整HTML的結構來解決。

您應該在主注釋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> 

Answer 4

您想要這樣的東西：

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

您的主要問題是您沒有想要實現的良好結構。

例如，每個注釋應該是它自己的<div>元素，並且所有注釋（無論是主注釋還是答復）都應具有一個公共comment類。

關於“回復”按鈕，當您將元素的位置設置為absolute位置時，該位置相對於具有relative位置的absolute位置的元素中最直接的父元素是absolute 。

例如，如果我有

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

absolute-positioned元素將相對於relative-positioned元素而不是static-positioned relative-positioned元素static-positioned

另外，使用<div>代替標題標簽（例如h4和h5 。

Answer 5

如果您想使標記保持原樣，則可以嘗試在.reply元素上使用float: right .reply

您可能需要調整h4元素上的邊距以改善間距。

另外，在.sub-comment規則中添加clear: both ，以防止文本環繞在“回復”按鈕上。

該解決方案解決了定位問題。 您可以根據需要添加邊距和填充以設置按鈕樣式。

 .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

您是否嘗試向Reply類添加邊距樣式？

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

這樣，它應該位於div的右下部分。

Answer 7

嘗試這種方式： 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;
}