Как выровнять div в DOM
Я пытаюсь выровнять блоки сообщений, но не знаю, как это сделать.
Мое намерение состоит в том, чтобы div использовал стиль, подобный следующему изображению
в моем запросе я выбираю ник пользователя эмиттера и получателя, а в foreach я принимаю это так
$chat = '';
foreach ($rs as $message) {
print_r($message);
$chat .= '<div class = "single-message'.(($_SESSION["nickname"]==$message->UserEmitter, $usuarioReceptor == $message->UserReceiver)?'right':'left').'">
<strong>'.$message->UserEmitter.': </strong><br /> <p>'.$message->message.'</p>
<span>'.date('h:i a', strtotime($message->created_at)).'</span>
</div>
<div class = "clear"></div>';
}
echo $chat;
но если я так сделаю, покажите мне ошибку в строке
(($_SESSION["nickname"]==$message->UserEmitter, $usuarioReceptor == $message->UserReceiver)?'right':'left').'">
я впервые делаю что-то с JS, надеюсь, кто-нибудь может мне помочь
Resutl of the Answer
чтобы я понял, я пытаюсь заставить этот cesg dav занять позицию слева, потому что приемник и cesg av2 занимают позицию справа, потому что это излучатель
исходный код, который я использую, находится в Один диск
New Foreach
foreach ($rs as $message) {
$chat .= '<div class = "single-message'.(($usuarioActual==$message)?'right':(($usuarioReceptor==$message->message)?'left':'')).'">
<strong>'.$message->UserEmitter.': </strong><br /> <p>'.$message->message.'</p>
<span>'.date('h:i a', strtotime($message->created_at)).'</span>
</div>
<div class = "clear"></div>';
}
@FelippeDuarte Я пытаюсь напечатать псевдоним получателя и излучателя, и он показывает, но я не знаю, почему они не используют стиль, как изображение, которое я поместил
Я имею в виду строку, которая выдает ошибку. (($_SESSION["nickname"]==$message->UserEmitter, $usuarioReceptor == $message->UserReceiver)?'right':'left').'">. Какая здесь логика?
ну, я пытаюсь сказать это, когда сообщение от получателя помещается влево, а когда сообщение от передатчика помещается вправо, я знаю, что оно изношено, но я не знаю, как это исправить
В случае ошибки вы используете запятую (,) в условном выражении, а не И (&&) ПОПРОБУЙТЕ ЭТО: ($ _SESSION ["nickname"] == $ message-> UserEmitter && $ usuarioReceptor == $ message-> UserReceiver)
@RamonSchmidtRocha Я пробую, но не дает желаемого результата
Ваша запятая не работает, поэтому ваша логика в этом условном выражении неверна ... Попробуйте повторить значения $ _SESSION ["nickname"] и $ message-> UserEmitter и $ usuarioReceptor и $ message-> UserReceive, чтобы вы могли знать, что такое неправильный
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Используя flexbox, легко манипулировать элементами на экране :) Я думаю, это решит вашу проблему с выравниванием и с PHP-кодом в конце html-файла, чтобы вы протестировали его на своем реальном коде!
.chat {
height: 200px;
width: 300px;
padding: 15px;
border: 1px solid black;
}
.message-container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.message {
flex-grow: 0;
padding: 5px;
border: 1px solid black;
}
.message-container.is-emitter {
align-items: flex-start;
}
.message-container.is-receiver {
align-items: flex-end;
}<div class = "chat">
<div class = "message-container is-emitter">
<div class = "message">EMITTER</div>
</div>
<div class = "message-container is-receiver">
<div class = "message">RECEIVER</div>
</div>
</div>
<!--
PHP CODE MODIFIED
$chat = '<div class = "chat">';
foreach ($rs as $message) {
$userType = (($_SESSION["nickname"] == $message->UserEmitter && $usuarioReceptor == $message->UserReceiver) ? 'is-emitter' : 'is-receiver'
$chat .= '<div class = "message-container ' . $userType . '">
<div class = "message">
<strong>'.$message->UserEmitter.': </strong>
<br />
<p>'.$message->message.'</p>
<span>'.date('h:i a', strtotime($message->created_at)).'</span>
</div>
</div>';
}
$chat .= '</div>';
echo $chat;
-->
Что вы пытаетесь сделать в этой строке?