我正在尝试对齐消息的 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>';
}
最佳答案
使用 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;
-->
关于javascript - 如何对齐 DOM 中的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51367850/