均匀地对齐文本css

Question

我试着自己查一下但是写错了。所以我做了一个关于我想要尝试做的非常好的照片示例。

非常感谢任何帮助。

这就是我现在所拥有的：

这就是我想要的：

请注意，框略微移动以适应较短的名称。

当前的CSS：

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

}

当前HTML（部分php：P）：

echo "<br />" . $row['name']; ?> > <span class='comment'>
<?php echo $row['comment']; ?></span>
<span class='commentInfo'><--(<?php echo $properdate; ?>)</span><br/>

Answer 1

以下是两个选择

固定宽度inline-block s

在HTML元素中包含会话的离散部分，使用display: inline-block并为您需要的内容提供固定宽度。

它看起来像这样

HTML

<ul>
    <li class="entry">
      <span class="name">Laura:</span>
      <span class="comment">Hey!</span>
      <span class="meta">&larr; (25/July/2013 5:43 PM)</span>
    </li>
    <li class="entry">
      <span class="name">Austen: </span>
      <span class="comment">Love this!!</span>
      <span class="meta">&larr; (25/July/2013 5:43 PM)</span>
    </li>

CSS

.entry .name {
    display: inline-block;
    width: 50px;
}

请参阅此处的一个有效示例： Working example

表

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

表格模型将为您处理大部分问题。

HTML

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

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

Working example 2

Answer 2

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

通过将包含div定义为表格行并将span标记定义为table-cell：

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

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

请参阅此处的工作示例：http://jsfiddle.net/TGUN3/1/

Answer 3

您可以使用支持网格系统的css框架。 以下是使用twitter bootstrap制作的示例。

导入css：

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

HTML code：

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

示例：http://jsfiddle.net/MgcDU/6247/

您可以根据需要修改范围大小。

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

http://webdesign.tutsplus.com/tutorials/complete-websites/twitter-bootstrap-101-the-grid/