условный поплавок <li>

Question

Я создаю чат-клиент и хочу float-right, если сообщение получено от активного пользователя, а затем float-left, когда сообщение получено от другого конечного пользователя. Я попытался добавить float:right в самом css, но когда я это сделал, мои элементы списка стали горизонтальными, а не вертикальными.

JavaScript

if (user.id === msgsender.id) {
    $("#messages").append($("<div class= bubble-r><li>/div>").text(msg));
} else {
    $("#messages").append($("<div class=bubble><li></div>").text(msg));
}
function render() {
    return (
      <div>
        <ul id="messages">
          <div />
        </ul>
      </div>
    );
  }

CSS

.bubble-r {
  overflow-x: hidden;

  align-items: flex-end;
  position: relative;
  background: #0072c6;
  max-width: 100px;
  padding: 5px;
  font-family: arial;
  margin: 0 auto;
  font-size: 14px;
  color: white;
  border-radius: 6px;
}

.bubble {
  overflow-x: hidden;
  position: relative;
  background: #cad5d7;
  max-width: 100px;
  padding: 5px;
  font-family: arial;
  margin: 0 auto;
  font-size: 14px;
  border-radius: 6px;
}
ul {
  padding: 0px;
  margin: 4px;
}

Answer 1

Это потому, что вам нужен упаковщик на уровне блока для каждого пузырькового текста. Основной подход заключается в вставке li, внутри которого есть div.bubble, который всплывает, если сообщение отправлено отправителем.

Добавление будет выглядеть так:

function addMessage(user, msg) {
    var $li = $("<li></li>");
    var $div = $("<div/>")
      .addClass("bubble")
      .text(msg)
      .toggleClass("bubble-sender", user.id === msgsender.id) //If sender, it will add "bubble-sender" class
      .appendTo($li);
    $li.appendTo("#messages");
}

и затем вы только заставляете класс .bubble-sender плавать вправо.

Вот скрипка с кодом https://jsfiddle.net/Robertroid/Lxd78ayf/29/

Также исправлены некоторые вещи, такие как избыточный css (оба пузыря имеют класс .bubble для общего стиля), изменено ul для ol (имеет смысл, поскольку текст чата упорядочен по прибытии) и что li является прямым потомком ol.

Надеюсь, это поможет

Answer 2

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

Теперь давайте исправим это и сделаем его более осмысленным.

Элементы могут иметь более одного класса, разделенных пробелом. Есть общий класс для bubble, затем классы для sender и receiver

Это даст вам что-то вроде:

//Div is an invalid child of ul, use li 
var userClass = user.id === msgsender.id ? "sender" :"receiver";
$("#messages").append($("<li class='bubbble'>").addClass(userClass).text(msg));

//Got rid of div from the below, it is invalid html
function render() {
    return (
       <div>
         <ul id="messages">              
         </ul>
       </div>
     );
   }

CSS

.bubble {
  overflow-x: hidden;
  position: relative;
  max-width: 100px;
  padding: 5px;
  font-family: arial;
  margin: 0 auto;
  font-size: 14px;
  border-radius: 6px;
  //Need to clear floats to get each
  //Message on a new line.
  clear:both;
}

.sender {
   background: #cad5d7;
   float:left;   
}    

.receiver {
  background: #0072c6;
  float:right;
}

ul {
  padding: 0px;
  margin: 4px;
}

Когда при визуализации должен дать вам:

.bubble {
      overflow-x: hidden;
      position: relative;
      max-width: 100px;
      padding: 5px;
      font-family: arial;
      margin: 0 auto;
      font-size: 14px;
      border-radius: 6px;
      margin-bottom:2px;
    }

    .sender {
       background: #cad5d7;
       float:left;
       clear:both;
     }

    .receiver {
      background: #0072c6;
      float:right;
      clear:both;
      color:#FFF;
    }

    ul {
      padding: 0px;
      margin: 4px;
    }

<ul id="messages">
  <li class="bubble sender">Hi from sender</li>
  <li class="bubble receiver">Hi from reciever</li>
  <li class="bubble sender">Whats up?</li>
  <li class="bubble sender">Having a good day?</li>
  <li class="bubble receiver">Not much. Just answering questions on SO</li>
</ul>

Answer 3

Ну, вам вообще не нужно использовать float! Вот что вы делаете:

if (user.id === msgsender.id) {
    $("#messages").append($('<div class="bubble-r"><li>/div>').text(msg));

//I assume bubble-r means you want this bubble on the right

} else {
     $("#messages").append($('<div class="bubble"><li></div>').text(msg));
}
function render() {
    return (
      <div>
        <ul id="messages">
        </ul>
      </div>
    );
}

Затем добавьте это в свой CSS:

.bubble {
    margin-left: 0;
}

.bubble-r {
    margin-right: 0;
}

Это делает соответствующие поля несуществующими, поэтому они прикрепляются к этой стороне экрана.