html - 将文本字符串的不同部分与 div 的左侧和右侧对齐

Question

我在当前使用剃须刀的项目中添加了一个聊天窗口。我遇到的问题是，当出现新行时，它会将所有内容都向左移动...问题的屏幕截图是红线显示突出显示的文本应右对齐的位置。显示此区域的当前代码看起来像这样：

<div id="messages" class="rectangular-area" style="text-align: left; width: 600px;">
<h3>
    Latest received events:
</h3>
 @For Each item In xList
   If item.Contains("System Message") Then
       @<br />@<b style="color: Red">@item.Split("-")(0)  - <b style="color: Black">@item.Split("-")(1) : <b style="color: #8B6508">@item.Split("-")(3)</b></b> </b>
   ElseIf item.Contains("*******@******online.com") Then
       @<br />@<b style="color:#00CDCD">@item.Split("-")(0) <b style="color: Blue">(@item.Split("-")(1)) <b style="color:Black"> : @item.Split("-")(2)</b></b></b>
   ElseIf item.Contains("************") Then
      @<br />@<b style="color:#00CDCD">@item.Split("-")(0) <b style="color: #E066FF">(@item.Split("-")(1)) <b style="color:Black"> : @item.Split("-")(2)</b></b></b>
   ElseIf item.Contains("************") Then
       @<br />@<b style="color:#00CDCD">@item.Split("-")(0) <b style="color: #66CDAA">(@item.Split("-")(1)) <b style="color:Black"> : @item.Split("-")(2)</b></b></b>
   Else
        @<br />@<b style="color:#00CDCD">@item.Split("-")(0) <b style="color: #FFA54F">(@item.Split("-")(1)) <b style="color:Black"> : @item.Split("-")(2)</b></b></b>
   End If
Next
</div>

关于如何实现这一壮举的任何想法？我已经尝试在每种类型的第三个中使用 align-left<b style>但这不起作用..

Answer 1

带有内联样式的标记很难处理，所以这里有一个简单的 HTML 和 CSS 示例，您可以从中学习：

HTML

<ul>
    <li>
        <strong>User 1</strong>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        
    </li>
    <li>
        <strong>User 2</strong>
        <p>Duis aute irure dolor in reprehenderit.</p>        
    </li>
    <li>
        <strong>User 1</strong>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        
    </li>
</ul>​

CSS

strong, p {
    display: block;
    width: 50%;
    float: left;
    margin-bottom: 1em;
}

演示