Шаблон:Форум

Пример

Пользователь 1

Реплика №1

Пользователь 2

Ответ на реплику

Пользователь 3

Ответ на реплику

Пользователь 4

Реплика №2

Пользователь 5

Ответ на реплику

Пользователь 6

Ответ на реплику

<!-- Общий элемент для комментариев -->
<div class="forum" style="width:40%>

<!-- Первый комментарий в ветке -->
  <div class="replica" >

    <div class="contents" style="background-color: #f7f7f7; border-style: solid; border-width: thin; 
         border-color: #ebf0ef; border-radius: 10px; padding-left: 5px">
      <p style="font-size: 20px;">Пользователь 1</p>
      
      <p>Реплика №1</p>
    </div>
<!-- Свободное место между комментариями -->
    <p style="margin-bottom: 5px"></p>
<!-- Свободное место между комментариями -->
<!-- Ответ на комментарий, располагается внутри элемента комментария, и отстоит от него на 5px вправо -->
    <div class="replica" style="position: relative; left: 8%">

      <div class="contents" style="background-color: #f7f7f7; border-style: solid; border-width: thin; 
           border-color: #ebf0ef; border-radius: 10px; padding-left: 5px">      
        <p style="font-size: 20px;">Пользователь 2</p>

        <p>Ответ на реплику</p>
      </div>
      <p style="margin-bottom: 5px"></p>

      <div class="replica" style="position: relative; left: 8%">

        <div class="contents" style="background-color: #f7f7f7; border-style: solid; border-width: thin; 
           border-color: #ebf0ef; border-radius: 10px; padding-left: 5px">      
          <p style="font-size: 20px;">Пользователь 3</p>

          <p>Ответ на реплику</p>
        </div>
        <p style="margin-bottom: 5px"></p>
      </div>
    </div>
<!-- Ответ на комментарий, располагается внутри элемента комментария, и отстоит от него на 5px вправо -->
  </div>
<!-- Первый комментарий в ветке -->

<!-- Первый комментарий в ветке -->
  <div class="replica" >

    <div class="contents" style="background-color: #f7f7f7; border-style: solid; border-width: thin; 
         border-color: #ebf0ef; border-radius: 10px; padding-left: 5px">
      <p style="font-size: 20px;">Пользователь 4</p>
      
      <p>Реплика №2</p>
    </div>
<!-- Свободное место между комментариями -->
    <p style="margin-bottom: 5px"></p>
<!-- Свободное место между комментариями -->
<!-- Ответ на комментарий, располагается внутри элемента комментария, и отстоит от него на 5px вправо -->
    <div class="replica" style="position: relative; left: 8%">

      <div class="contents" style="background-color: #f7f7f7; border-style: solid; border-width: thin; 
           border-color: #ebf0ef; border-radius: 10px; padding-left: 5px">      
        <p style="font-size: 20px;">Пользователь 5</p>

        <p>Ответ на реплику</p>
      </div>
      <p style="margin-bottom: 5px"></p>

      <div class="replica" style="position: relative; left: 8%">

        <div class="contents" style="background-color: #f7f7f7; border-style: solid; border-width: thin; 
           border-color: #ebf0ef; border-radius: 10px; padding-left: 5px">      
          <p style="font-size: 20px;">Пользователь 6</p>

          <p>Ответ на реплику</p>
        </div>
        <p style="margin-bottom: 5px"></p>
      </div>
    </div>
<!-- Ответ на комментарий, располагается внутри элемента комментария, и отстоит от него на 5px вправо -->
  </div>
<!-- Первый комментарий в ветке -->

</div>
<!-- Общий элемент для комментариев -->