Как создавать новые сообщения влево/вправо в зависимости от того, кто их отправил? (Нет плавающего)

Вопрос:

Я пытаюсь создать веб-страницу, где, в зависимости от того, отправляет ли пользователь 1 (слева текстовая область) или пользователь 2 (правая текстовая область) сообщение в желтом окне диалога слева или справа, то же самое, что сообщения отображаются на телефонах В наше время. Отмечается, кто отправил сообщение по цвету фона отправленного сообщения, пользователь 1 светлее синий, пользователь 2 фиолетовый. Я пытаюсь сделать это без использования float, поэтому, пожалуйста, не предлагайте этого. Здесь код:

function Send(ele) {
var br = document.createElement("br");
var foo = document.getElementById("conversation");
foo.appendChild(br);
var para = document.createElement("label");
var txt;
if (ele.id == "btn") {
txt = document.getElementById("text");
var node = document.createTextNode(txt.value);
para.appendChild(node);
var element = document.getElementById("conversation");
para.className = 'message';
element.appendChild(para);
} else {
txt = document.getElementById("text2");
var node = document.createTextNode(txt.value);
para.appendChild(node);
var element = document.getElementById("conversation");
para.className = 'message2';
element.appendChild(para);
}
}
body {
margin: 5% 10% 0% 10%;
background-color: azure;
}

#conversation {
width: 100%;
height: 80%;
background-color: yellow;
}

.parent {
white-space: nowrap;
text-align: center,
}

.user {
display: inline-block;
width: 50%;
}

.user2 {
display: inline-block;
text-align: right;
width: 50%;
}

.message,
.message2 {
display: inline-block;
width: auto;
height: auto;
max-width: 50%;
word-wrap: break-word;
color: white;
background-color: DodgerBlue;
border-radius: 10px;
padding: 5px;
margin: 2px;
position: relative;
top: 2%;
}

.message2 {
background-color: purple;
text-align: right;
}


/*23*/
<div id="conversation">
<div class="message">
<label>On insensible possession oh particular attachment at excellence in. The books arose but miles happy she. It building contempt or interest children mistress of unlocked no. </label>
</div>
<br />
<div class="message2">
<label>On insensible possession oh particular attachment at excellence in. The books arose but miles happy she. It building contempt or interest children mistress of unlocked no. </label>
</div>
</div>
<div class="parent">
<div class="user">
<input id="text" type="textarea" />
<input id="btn" type="button" value="Send" onclick="Send(this)">
</div>
<div class="user2">
<input id="btn2" type="button" value="Send" onclick="Send(this)">
<input id="text2" type="textarea" />

</div>
</div>

Я также загрузил его в jsfiddle, чтобы спасти вас, ребята, проблемы:

https://jsfiddle.net/pbzqw278/

Если бы не было слишком много неприятностей, не могли бы вы также объяснить, почему вы сделали то, что делали, поскольку css по-прежнему выглядит для меня серым.

Лучший ответ:

Вы могли бы просто использовать flex и строку обертки. Каждое сообщение может иметь display: flex; строка, а затем сообщения, настроенные соответственно на align-self: flex-start; и align-self: flex-end; , Я отредактировал ваш фрагмент, чтобы его отразить.

function Send(ele) {
  var foo = document.getElementById("conversation");
  var rowWrapper = document.createElement('div');
  rowWrapper.className = 'message-row';
  var para = document.createElement("label");
  var txt;
  if (ele.id == "btn") {
    txt = document.getElementById("text");
    var node = document.createTextNode(txt.value);
    para.appendChild(node);
    para.className = 'message';
    rowWrapper.appendChild(para);
    var element = document.getElementById("conversation");
    element.appendChild(rowWrapper);
  } else {
    txt = document.getElementById("text2");
    var node = document.createTextNode(txt.value);
    para.appendChild(node);
    para.className = 'message2';
    rowWrapper.appendChild(para);
    var element = document.getElementById("conversation");
    element.appendChild(rowWrapper);
  }
}
body {
  margin: 5% 10% 0% 10%;
  background-color: azure;
}

#conversation {
  width: 100%;
  height: 80%;
  background-color: yellow;
}

.parent {
  white-space: nowrap;
  text-align: center,
}

.user {
  display: inline-block;
  width: 50%;
}

.user2 {
  display: inline-block;
  text-align: right;
  width: 50%;
}

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

.message,
.message2 {
  display: inline-block;
  width: auto;
  height: auto;
  max-width: 50%;
  word-wrap: break-word;
  color: white;
  background-color: DodgerBlue;
  border-radius: 10px;
  padding: 5px;
  margin: 2px;
  position: relative;
  top: 2%;
}

.message {
    align-self: flex-start;
}

.message2 {
  align-self: flex-end;
  background-color: purple;
  text-align: right;
}


/*23*/
<div id="conversation">
    <div class="message-row">
        <div class="message">
            <label>On insensible possession oh particular attachment at excellence in. The books arose but miles happy she. It building contempt or interest children mistress of unlocked no. </label>
        </div>
    </div>
    <div class="message-row">
        <div class="message2">
            <label>On insensible possession oh particular attachment at excellence in. The books arose but miles happy she. It building contempt or interest children mistress of unlocked no. </label>
        </div>
    </div>
</div>

<div class="parent">
    <div class="user">
        <input id="text" type="textarea" />
        <input id="btn" type="button" value="Send" onclick="Send(this)">
    </div>
    <div class="user2">
        <input id="btn2" type="button" value="Send" onclick="Send(this)">
        <input id="text2" type="textarea" />
    </div>
</div>
Ответ №1

Вы можете добиться этого, установив display: block для обоих .message и .message2, и добавив margin-left: auto to .message2.

Я бы также регулировал max-width примерно до 48%.

Вы можете переместить некоторые свойства css из div в label. Это позволит ширине текста определять ширину background-color.

играть на скрипке

body {
margin: 5% 10% 0% 10%;
background-color: azure;
}

#conversation {
width: 100%;
height: 80%;
background-color: yellow;
}

.parent {
white-space: nowrap;
text-align: center,
}

.user {
display: inline-block;
width: 50%;
}

.user2 {
display: inline-block;
text-align: right;
width: 50%;
}

.message,
.message2 {
max-width: 48%;
margin: 2px;
position: relative;
top: 2%;
display: block;
}

.message2 {
margin-left: auto;
text-align: right;
}

.message label,
.message2 label {
display: inline-block;
border-radius: 10px;
padding: 5px;
word-wrap: break-word;
color: white;
background-color: DodgerBlue;
}

.message2 label {
background-color: purple;
}


/*23*/
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="script.js"></script>

<body>
<div id="conversation">
<div class="message">
<label>On insensible possession!</label>
</div>
<br />
<div class="message2">
<label>On insensible possession oh particular attachment at excellence in. The books arose but miles happy she. It building contempt or interest children mistress of unlocked no. On insensible possession oh particular attachment at excellence in. The books
arose but miles happy she. It building contempt or interest children mistress of unlocked no. </label>
</div>
<div class="message2">
<label>On insensible</label>
</div>
<div class="message">
<label>On insensible possession oh particular attachment at excellence in. The books arose but miles happy she. It building contempt or interest children mistress of unlocked no. </label>
</div>
<div class="message2">
<label>On insensible possession oh particular attachment at excellence in. The books arose but miles happy she. It building contempt or interest children mistress of unlocked no. </label>
</div>
</div>
<div class="parent">
<div class="user">
<input id="text" type="textarea" />
<input id="btn" type="button" value="Send" onclick="Send(this)">
</div>
<div class="user2">
<input id="btn2" type="button" value="Send" onclick="Send(this)">
<input id="text2" type="textarea" />

</div>
</div>

</body>
Ответ №2

В зависимости от вашего предложения if, где вы проверяете, с какой кнопки была отправлена, я бы добавил позицию в TextNode.

Вы можете добавить CSS Style через Javascript следующим образом:

document.getElementById("myTextNode").style.left = "5px;";

Вы должны добавить идентификатор в TextNode, очевидно, и на основе вашего кода. Я уверен, что вы знаете, как это сделать через Javascript :). На всякий случай:

node.id = "someID";

Оцените статью
TechArks.Ru
Добавить комментарий