时间戳

首页 > 解决方案 > 如何在 DOM 中对齐 div

javascript - 如何在 DOM 中对齐 div

问题描述

我正在尝试对齐消息的 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 做东西，希望有人能帮助我

答案的结果

在此处输入图像描述

为了让我明白，我试图让 cesg dav 在左侧占据一个位置，因为接收器和 cesg av2 在右侧占据一个位置，因为是发射器

我使用的源代码在OneDrive

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

}

标签： javascriptphphtmlcss

解决方案

使用 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;

-->

推荐阅读