Как создать таблицу с помощью div

Question

Я хочу создать такую ​​таблицу, но с использованием div вместо таблицы

<style type="text/css">
    body{ font-family:"Segoe UI", "Tahoma" }
    td {
        padding:0px 5px 10px 5px;
    }
    .username {
        white-space:nowrap;
        vertical-align:top;
        text-align:right;
        width:auto;
        color:DodgerBlue;
    }
    </style>

    <table width="500px" >
        <tr>
            <td class="username">copperfield</td>
            <td>How to create table by using div  </td>
            <td style="vertical-align:top">time </td>
        </tr>
        <tr>
            <td class="username">copperfield</td> 
            <td>
              How to create table by using div How to create table by sing div How to create table by to create table by using div <img src="images/thinking.gif"> </br>
            </td>
            <td style="vertical-align:top"> 8:00 </td>
        </tr>
        <tr>
            <td class="username"> </td> 
            <td>
               How to create table by using div</br>
            </td>
            <td style="vertical-align:top"> 8:00 </td>
        </tr>
        <tr>
            <td class="username"> </td> 
            <td>
               How to create table by using div</br>
            </td>
            <td style="vertical-align:top"> 8:00 </td>
        </tr>
        <tr>
            <td class="username">michael</td> <td><img src="images/thinking.gif"> Gi ku </td> 
            <td style="vertical-align:top"> 8:00 </td>
        </tr>
    </table>

Я пробую следующий код, но он не удаётся

   <style type="text/css">
    body{
        font-family:Segoe UI;
    }
    .all{

    float:left;
    display:block;
    }

    .chat{
    width:700px;
    float:left;
    display:table-cell;
    }

    .us{
        color:blue;
        text-align:right;
        float:left;
        margin-right:10px;

    }
    .ct{
    white-space:normal;
        float:left;
        margin-right:10px;
    }
    .t{
        float:left;
        width:auto
    }
    </style>
    <div class="all">

    <div class="chat">
        <div class="us"> userna3 46346346me </div> 
        <div  class="ct"> content </div > 
        <div class="t"> time </div>
    </div>
    <div class="chat">
        <div class="us"> copperfield </div> 
        <div class="ct"> How to create table by using div How to create table by sing div How to create table by to create table by using div</div> 
        <div class="t"> 8:00 </div>
    </div>
    <div class="chat">
        <div class="us"> copperfield </div> 
        <div  class="ct"> How to create table by using div Ho </div> 
        <div class="t"> 8:00 </div>
    </div>
</div>

Answer 1

Это выглядит так, как вы хотите: http://jsfiddle.net/ttunW/. Ключ использовал display:table; для .all, display:table-row;, для .chat, избавляясь от свойств float:left на всех div s и присвоение display:table-cell; div s в .chat.

Answer 2

Вы не можете иметь что-то плавающее в поплавке. Это просто не работает в некоторых уродливых браузерах кашель IE кашель .

Так что поменяйте весь свой класс в css, чтобы он выглядел так:

.all div {float:left;}

Тогда уберите все остальные поплавки из ваших классов. Для нас ct и t просто задают им ширину внутри каждого div чата. Также измените div внутри чата div на p теги.