Я хочу начать текст с той же позиции, а также выровнять его по правому краю в строке

#javascript #html #css #sass #css-transitions

Вопрос:

Текущее Поведение

Я хочу выровнять текст справа от страницы в строке, также текст должен начинаться с одной и той же позиции на основе самого длинного текста на той же странице.

текущий код

HTML:

 <div class="row">
        <div>Titile</div>
    
        <span class="comment">
            long textelement
        </span>
    </div>

<div class="row">
    <div> Titile2</div>

    <span class="comment">
        small text
    </span>
</div>

CSS:

 .row{
  width: 67%;
  display:flex;
}

.comment{
 margin-left: auto;
}

демонстрация: демонстрация

Ожидание

Ответ №1:

Простой обходной путь-добавить контейнер div в качестве родителя, чтобы дочерний элемент был правильно выровнен

 .container {
  display: flex;
  justify-content: space-between;
}

.row {
  width: 67%;
  display: flex;
  flex-direction: column;
}

 <div class="container">
  <div class="row">
    <div>Titile</div>

    <span class="comment">
      long textelement
    </span>
  </div>

  <div class="row">
    <div> Titile2</div>

    <span class="comment">
      small text
    </span>
  </div>
</div>

Ответ №2:

Вы можете добавить новый div вокруг содержимого в строке, для которой требуется его содержимое справа. Если у этого div есть width: fit-content , он будет иметь ширину самого большого дочернего элемента(самый длинный текст) и будет выглядеть так, как вы хотели.

 .row{
  width: 67%;
  display:flex;
  flex-direction: column;
}
.move-right{
  align-items: flex-end;
}

.row-items{
  width: fit-content;
}

 <div class="row">
  <div>
    Title
  </div>

  <span class="comment">
    long text element
  </span>
</div>

<div class="row move-right">
  <div class="row-items">
    <div>
      Titile2
    </div>

    <span class="comment">
      small text
    </span>
  </div>
</div>