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，删除所有float:left上的div属性，以及将display:table-cell;分配给div内的.chat。

Answer 2

你不能在浮动中浮动一些东西。它只是在一些丑陋的浏览器中工作咳嗽 IE 咳嗽。

所以改变你的css中的所有类看起来像这样：

.all div {float:left;}

然后从你的课程中拿走所有其他花车。对于我们来说，ct和t只是给每个聊天div内部设置一个宽度。同时将聊天div内部的div更改为p标记。

如何使用div创建表

2 个答案: