0

我试图自己查一下，但措辞有问题。所以我做了一个糟糕的photoshop示例来说明我想做的事情。

任何帮助将非常感激。

这是我现在拥有的：

在此处输入图像描述

这就是我想要的：

在此处输入图像描述

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

当前的 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/>
4

3 回答 3

1

这里有两个选择

固定inline-block宽度

将对话的离散部分包装在 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

于 2013-07-26T02:33:49.897 回答
0

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

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

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

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

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

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

于 2013-07-26T02:49:20.580 回答
0

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

通过将包含的 div 定义为 table-row 并将其中的 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/

于 2013-07-26T02:38:54.800 回答