如何使用div创建表

Question

我想创建一个这样的表，但是使用div而不是table

<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 ，取消所有div上的float:left属性，并分配display:table-cell; .chat 到.chat的div 。

Answer 2

您不能在漂浮物中漂浮任何东西。 它只是不工作在一些丑陋的浏览器IE 咳嗽 咳嗽 。

因此，将您的CSS中的所有类更改为如下所示：

.all div {float:left;}

然后从您的班级中删除所有其他花车。 对于我们来说，ct和t只是在每个聊天div内给他们指定了宽度。 还要将聊天div的div内部更改为p标签。