【问题标题】：HTML CSS text alignHTML CSS 文本对齐
【发布时间】：2011-06-03 09:34:51
【问题描述】：

附上一张图片。

我正在尝试获取最右端所示的文本格式。即在缩略图（36px）的高度内，名称、时间、日期必须垂直对齐显示。我在显示垂直对齐的文本时遇到问题。这是我的代码 -

<div id="sresults" style="position:absolute;top:120px; left:36%;">
    <div id="0" style="width:500px;padding:5px;cursor:pointer;clear:both;">
        <div id="content0" style="float:left; font-size:13px;">"Hey dude how are you doing?"</div>
        <div id="meta0" style="float:right;">
           <img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts'></img>
           <img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter"></img>
           <div id='name' style="float:right; font-size:11px">Peter</div>
           <div id='time' style="float:right;font-size:11px;">19:23</div>
           <div id='date' style="float:right;font-size:11px;">23 Dec'10</div>
        </div>
    </div>

准确地说，我希望 div id 'name'、'time'、'date' 像图像中一样对齐。如何？

另请注意，id="0" 的 div 是结果之一，一个页面中将有 10 个这样的结果，全部在 <div id="sresults"> 下

【问题讨论】：

以防万一，ids和classes必须以字母开头

标签： html css text-align

【解决方案1】：

您可以使用table 而不是div，这对我来说似乎更合乎逻辑：

<div id="sresults" style="position:absolute;top:120px; left:36%;">
    <div id="0" style="width:500px;padding:5px;cursor:pointer;clear:both;">
        <div id="content0" style="float:left; font-size:13px;">"Hey dude how are you doing?"</div>
        <table id="meta0" style="float:right;">
            <tr>
                <td>
                    <img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts'/>
                    <img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter"/>
                </td>
                <td style="text-align:right;">
                   <div id='name' style="font-size:11px">Peter</div>
                   <div id='time' style="font-size:11px;">19:23</div>
                   <div id='date' style="font-size:11px;">23 Dec'10</div>
                </td>
            </tr>
        </table>
    </div>
</div>

更新

这是带有 div 的代码：

<div id="sresults" style="position:absolute;top:120px; left:36%;">
    <div id="id0" style="width:500px;padding:5px;cursor:pointer;clear:both;">
        <div id="content0" style="float:left; font-size:13px;">"Hey dude how are you doing?"</div>
        <div id="meta0" style="float:right;">
            <img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts' style="float: left;"/>
            <img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter" style="float: left;"/>
            <div style="text-align:right; float:right">
                   <div id='name' style="font-size:11px">Peter</div>
                   <div id='time' style="font-size:11px;">19:23</div>
                   <div id='date' style="font-size:11px;">23 Dec'10</div>
            </div>
        </div>
    </div>
</div>

【讨论】：

那很难看。表格不应该用来解决布局问题。
为什么不呢？如果布局是表格，您应该使用表格。我就是这么想的。
@RAMe0 数据本质上不是表格。他现在只想让它看起来像一张桌子。

【解决方案2】：

这就是你想要的：http://www.bravegnuworld.com/rjune/test.html

注意将名称等封装在浮动的 div 中对吗？你有三个 div（块元素，它们会自动堆叠）。将它们放在另一个 div 中，您现在有一个块元素，其中包含三个堆叠的块。您可以使用 "float:right" 或 "display:inline-block" 使 div 显示在同一级别。作为该行的其余部分。

<div id="sresults" style="position:absolute;top:120px; left:36%; background:yellow">
  <div id="0" style="width:500px;padding:5px;cursor:pointer;clear:both; background:red">
    <div id="content0" style="float:left; font-size:13px; background:blue">"Hey dude how are you doing?"</div>
    <div id="meta0" style="float:right; background:green">
     <img src="http://www.mnducksvolunteer.org/_/rsrc/1262377955090/services/Google-Contacts-32.png" width="36px" title='Google Contacts'></img>
     <img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs455.snc4/49881_1146922913_477096_q.jpg" width="36" title="peter"></img>
      <div style="float:right">
        <div id='name' style="font-size:11px">Peter</div>
        <div id='time' style="font-size:11px;">19:23</div>
        <div id='date' style="font-size:11px;">23 Dec'10</div>
      </div>
    </div>
</div>

【讨论】：