如何在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做东西，希望有人能帮助我

答案的结果

为了让我理解，我试图使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>';

}

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