Выравнивание абсолютного текста вправо справа от родительского div

У меня есть простая система комментариев, где пользователи могут оставлять комментарии на страницах. Затем другие пользователи могут ответить на эти «основные комментарии», в результате получив «дополнительные комментарии». Это только снижается на один уровень (нет «суб-комментариев»). Я пытаюсь выровнять ссылку «Ответить» в правом нижнем углу основного комментария. Проблема состоит в том, что основной комментарий div содержит все комментарии для детей, которые просто выравнивают его до нижней части последнего комментария.Выравнивание абсолютного текста вправо справа от родительского div

Я пробовал делать top: 35%, но, как вы можете видеть в скрипке ниже, в зависимости от количества/длины комментариев это не работает.

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

Я установил sub-comment-2 в display: none. Если вы избавитесь от этого, вы увидите, что я имею в виду, когда высота ссылки ответа меняется.

Все, что мне нужно, это оставаться в правом нижнем углу красной области и оставаться там, независимо от того, сколько суб комментариев есть/длина основного комментария.

источник

2015-03-13 Frayt

Поместите главный комментарий в div и добавьте кнопку ответа в этот div. Затем установите position:relative на этот div и position: absolute; bottom: 0, чтобы ответить. http://jsfiddle.net/cqjnjy8f/2/

источник

2015-03-13 11:47:37 s3v3n

Я думаю, что проблема здесь одна из структур.

Вам нужен только «Ответ» в качестве дополнения к исходному комментарию, поэтому элемент (и 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>

источник

2015-03-13 11:48:30

Это может быть решена путем изменения структуры вашего HTML, обеспечивая это возможно.

У вас должна быть кнопка «Ответить» в вашем основном div 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>

источник

2015-03-13 11:54:24

Вы хотите что-то вроде этого:

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 ,

источник

2015-03-13 11:55:15

Если вы хотите, чтобы вы делали разметку точно так же, как у вас есть, вы можете попробовать использовать 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>

источник

2015-03-13 11:57:26

Вы пробовали добавить стиль маржу Ответить класс?

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

Таким образом, он должен располагаться в нижней правой части вашего div.

источник

2015-03-13 11:57:27

Попробуйте так: 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; 
}

источник

2015-03-13 12:06:50

Выравнивание абсолютного текста вправо справа от родительского div

ответ

Смежные вопросы