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

如何在DOM中对齐div

1 个答案: