Как я могу плавать текст вправо, сохраняя его в соответствии с div, внутри которого он находится?

Question

Я хотел бы сохранить два элемента <p> в строке после того, как я переместил один из них вправо.

.bottomtext {
  background-color: #e6fbd0;
}

.bottomtext p {
  display: inline;
}

.right {
  float: right;
  clear: left;
}

<div class="bottomtext">
  <p class="right">
    © Name
  </p>
  <p>
    <a>Text</a>
  </p>
</div>

Проблема настолько проста, что я не знаю, почему она существует даже без очевидного исправления. Вот это jsfiddle . Это первый сайт, который я когда-либо делал, так что терпите меня ...

Answer 1

Я думаю, что то, что вы пытаетесь сделать, должно быть проще с flexbox .

Может быть что-то вроде этого:

.bottomtext {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

Обратите внимание, что flex-direction: row направление по умолчанию при использовании display: flex.

Answer 2

Вы можете плавать текст влево, имя справа:

.bottomtext {
  background-color: #e6fbd0;
  overflow:auto;
}

.left {
  float: left;
}

.right {
  float: right;
}

<div class="bottomtext">
  <p class="right">
    © Name
  </p>
  <p class="left">
    <a>Text</a>
  </p>
</div>

Или, возможно, используйте flexbox:

#wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #e6fbd0;
}

<div id="wrapper">
  <p>Text</p>
  <p>@ Name</p>
</div>