php - HTML，CSS文字包装

Question

我正在创建一个社交网络，让用户发布他们的时间表的状态。
当状态显示在时间线上时，发布它的人的用户名显示在状态旁边。用户名在左边，状态在右边（几个空格外）。
例如，如果状态为5行，则另一个状态将下降，因此用户名不会与正确的状态对齐。
我试着修好它，但什么也没发生。
我不知道怎么修，有人能帮我吗？
主页.php：

<div class="w3-container">
<h2 style= "word-break: break-word;">
<?php 

include("connect.php");
include("auth_login.php");

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

//Write the query
$sql = "SELECT body FROM posts";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
    echo "<p>".$row['body']. "</p>";

}
} else {
echo "No posts";
}

?>
</h2>

<h3>
<?php

//Write the query
$sql = "SELECT username FROM posts";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
    echo "<p>".$row['username']."</p>";
}
} else {
echo "";
}

$conn->close();

?>
</h3>
</div>

这就是我遇到的问题：

Answer 1

这可能会有帮助。我把他们两个都放进沙发床。在此之前，我将容器的宽度设置为100%。
希望它适合你：）

.w3-container {
 width: 100%;
}

.w3-container .left-align {
 width: 50%;
 float: left;
}

.w3-container .right-align {
 width: 50%;
 float: right;
 }

<div class="w3-container">
 <div class="left-align">
<h2 style= "word-break: break-word;">
<?php 

include("connect.php");
include("auth_login.php");

ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

//Write the query
$sql = "SELECT body FROM posts";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
    echo "<p>".$row['body']. "</p>";

}
} else {
echo "No posts";
}

?>
</h2>
</div>
<div class="right-align">
<h3>
<?php

//Write the query
$sql = "SELECT username FROM posts";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
    echo "<p>".$row['username']."</p>";
}
} else {
echo "";
}

$conn->close();

?>
</h3>
</div>
</div>