HTML，CSS Word Wrapping

Question

我正在创建一个社交网络，让用户可以将状态发布到他们的时间线。

当状态显示在其时间轴上时，发布该状态的人员的用户名显示在状态旁边。用户名在左侧，状态在右侧（几个空格）。

例如，如果状态为5行，则另一个状态为down，因此用户名与正确状态不对齐。

我试过修理它，但什么都没发生。

我不知道如何修复它，有人可以帮助我吗？

home.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

这可能会有所帮助。我将它们都放入div中。在此之前，我将容器的宽度设置为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>