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

Question

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

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

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

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

Demo