HTML CSS выравнивание текста

Question

прикреплено изображение.

Я пытаюсь получить текстовый формат, как показано в самом правом конце. то есть в пределах высоты миниатюры (36 пикселей) имя, время и дата должны быть показаны вертикально выровненными. У меня проблема с отображением текста по вертикали. Вот мой код -

<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 'name', 'time', 'date' были выровнены, как на картинке. как?

Также обратите внимание, что div с id = "0" является одним из результатов, на странице будет 10 таких, все под <div id="sresults">

Answer 1

Вот что вы хотите: http://www.bravegnuworld.com/rjune/test.html

Обратите внимание на инкапсуляцию имени и т. Д. В 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>

Answer 2

Вы можете использовать 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>

UPD

Вот код с divs:

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