在css中均匀对齐文本

我试着自己查，但在措辞上有困难。所以我做了一个我想尝试做的糟糕的Photoshop示例

任何帮助都将不胜感激

以下是我现在拥有的：

以下是我想要的：

请注意，该框稍微移动以容纳较短的名称

当前CSS：

.comment {
    background-color: #09F;
    color: white;
    border-radius: 3px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 50px;

}

当前HTML（包含部分php:p）：

echo“
”$行['name']；？>>
这里有两个选择

固定宽度
内联块
s
用HTML元素包装对话的离散部分，使用
display:inline block
并为需要的部分指定固定宽度

它看起来像这样

HTML
请参见此处的工作示例：

桌子
我不建议使用表格方法，因为表格应该用于表格数据，而不是用于布局。然而，您的内容实际上是一种表格形式，使用表格可能是有意义的

表模型将为您处理大多数问题

HTML

劳拉：
嘿
&larr；（2013年7月25日下午5:43）
奥斯汀：
喜欢这个！！
&larr；（2013年7月25日下午5:43）

这就是你所需要的。没有特别的CSS

作为另一种解决方案，您可以将CSS中的属性用于块元素

通过将包含的div定义为表行，将其中的span标记定义为表单元格：

div.table { display:table-row; }
div.table span { display:table-cell; }

<div class="table">
    <span>See</span>
    <span>Works</span>
</div>

div.table{display:table row；}
div.table span{display:table cell；}
看见
作品

请参阅此处的工作示例：
您可以使用支持网格系统的css框架。
下面是一个使用twitter引导的示例

导入css：

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

HTML代码：

<div class="span12">
    <div class="span1">Austin</div>
    <div class="span1"> > </div>
    <div class="span7">Hey 25/July/2013 4:45PM</div>
</div>
<div class="span12">
    <div class="span1">Austin</div>
    <div class="span1"> > </div>
    <div class="span7">Hi 25/July/2013 4:59PM</div>
</div>
<div class="span12">
    <div class="span1">Laura</div>
    <div class="span1"> > </div>
    <div class="span7">Love this!! 25/July/2013 5:45PM</div>
</div>
<div class="span12">
    <div class="span1">Austin</div>
    <div class="span1"> > </div>
    <div class="span7">Rawr 25/July/2013 6:45PM</div>
</div>


奥斯丁
> 
嘿，2013年7月25日下午4:45
奥斯丁
> 
你好，2013年7月25日下午4:59
劳拉
> 
喜欢这个！！2013年7月25日下午5:45
奥斯丁
> 
2013年7月25日下午6:45

例如：

可以根据需要修改跨度大小

有关引导网格的更多信息：

提供当前HTML和CSS的相关部分。@AndrewMarshall Done:）更新后的主要帖子最简单的解决方案可能是制作一个
或将每一列放入div@asimes从来没想过“请注意，为了容纳较短的名称，框稍微移动了一下”，这是什么意思？
<table>
    <tr class="entry">
      <td class="name">Laura:</td>
      <td class="comment">Hey!</td>
      <td class="meta">&larr; (25/July/2013 5:43 PM)</td>
    </tr>
    <tr class="entry">
      <td class="name">Austen: </td>
      <td class="comment">Love this!!</td>
      <td class="meta">&larr; (25/July/2013 5:43 PM)</td>
    </tr>
  </table>

div.table { display:table-row; }
div.table span { display:table-cell; }

<div class="table">
    <span>See</span>
    <span>Works</span>
</div>

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

<div class="span12">
    <div class="span1">Austin</div>
    <div class="span1"> > </div>
    <div class="span7">Hey 25/July/2013 4:45PM</div>
</div>
<div class="span12">
    <div class="span1">Austin</div>
    <div class="span1"> > </div>
    <div class="span7">Hi 25/July/2013 4:59PM</div>
</div>
<div class="span12">
    <div class="span1">Laura</div>
    <div class="span1"> > </div>
    <div class="span7">Love this!! 25/July/2013 5:45PM</div>
</div>
<div class="span12">
    <div class="span1">Austin</div>
    <div class="span1"> > </div>
    <div class="span7">Rawr 25/July/2013 6:45PM</div>
</div>