javascript - 如何对齐 DOM 中的 div

Question

我正在尝试对齐消息的 div，但我不知道如何对齐。

我的意图是让 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 位于右侧，因为是发射器

我使用的源代码在 OneDrive 中

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>';

}

Answer 1

使用 flexbox 很容易操作屏幕上的元素 :) 我认为它解决了你的对齐问题，并在 html 文件末尾使用 php 代码来测试你的真实代码!

.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;

-->