将div标签与table-cell和row一起使用

时间：2014-02-07 07:30:36

标签： css html

enter image description here

我想用HTML设计上面的div图像，我尝试使用以下代码：

这个css部分

<style type="text/css">

    .divTable
    {

        border-color: Gray;
        border: 1px;
        border-spacing: 0.5px;
        border-style: solid;
        display: table;
        display: block;
        width: 100%;
        padding: 2px 1px 0px 1px;
         background-color: #CCCCCC;
    }
    .divRow
    {
      display: table-row;
      border-color: White;
        border: 1px;
        border-spacing: 0.5px;

        padding: 2px 2px 2px 2px;
    }
        .divCell
        {
          display: table-cell;
             float: left;
            border-color: White;
        border: 2px;
        padding: 2px 2px 2px 2px;


    }
</style>

这是html部分

    <div class="divTable">
    <div class="divRow">
        <div class="divCell">
            <span>
                <label id="lblId">
                    ID</label></span>
        </div>
        <div class="divCell">
            <span>
                <label id="Label1">
                    Name</label></span>
        </div>
        <div class="divCell">
            <span>
                <label id="Label2">
                    Age</label></span>
        </div>
        <div class="divCell" >
            <span>
                <label id="Label3" >
                    Date Of Birth</label></span>
        </div>
        <div class="divCell">
            <span>
                <label id="Label4">
                    Gender</label></span>
        </div>
        <div class="divCell">
            <span>
                <label id="Label5" >
                    </label></span>
        </div>
        <div class="divCell"">
            <span>
                <label id="Label6">
                    Username</label></span>
        </div>
        <div class="divCell">
            <span>
                <label id="Label7">
                    Credential</label></span>
        </div>
        <div class="divCell">
            <span>
                <label id="Label8">
                    Company Name</label></span>
        </div>
    </div>
    <div class="divRow">

    </div>
    <div class="divRow">

    </div>
    <div class="divRow">

    </div>
</div>
div cell有什么问题我怎么设置它们，请检查代码和CSS并帮我解决这个问题， 我想设计只有div的页面，以便最小化页面设计的最大化将保持相同

4 个答案:

答案 0 :(得分：0)

删除display: block;中的.divTable。您只需要display: table;。

同样在.divCell，您可以将float: left更改为text-align: left;

答案 1 :(得分：0)

您通过应用display:table删除display:block来覆盖display:block

答案 2 :(得分：0)

请参阅此jsfiddle演示<table>，但是当您最小化页面设计的最大化时，它将保持不变

http://jsfiddle.net/jkkheni/D6VHG/

与div的新小提琴链接

http://jsfiddle.net/jkkheni/D6VHG/1/

答案 3 :(得分：0)

试试这段代码..我做了一些修改

HTML 

<div class="divTable">
        <div class="divRow">
            <div style="width:10%; line-height:25px; float:left; border-left:2px solid #fff">
            ID
            </div>

            <div style="width:10%; line-height:25px; float:left; border-right:2px solid #fff">
            Name
            </div>

            <div style="width:10%; line-height:25px; float:left; border-right:2px solid #fff">
            Age
            </div>

            <div style="width:10%; line-height:25px; float:left; border-right:2px solid #fff">
            Date of Birth
            </div>

            <div style="width:10%; line-height:25px; float:left; border-right:2px solid #fff">
            Gender
            </div>

            <div style="width:15%; line-height:25px; float:left; border-right:2px solid #fff">
            _
            </div>

            <div style="width:11%; line-height:25px; float:left; border-right:2px solid #fff">
            Username
            </div>

            <div style="width:11%; line-height:25px; float:left; border-right:2px solid #fff">
            Credential
            </div>

            <div style="width:11%; line-height:25px; float:left;">
            Company Name
            </div>
        </div>

        <div class="divRow">
            <div style="line-height:25px; float:left; width:50%; border:2px solid #fff; border-right:none">
            Subject1
            </div>

            <div style="line-height:25px; float:left; width:49%; border:2px solid #fff;">
            Subject2
            </div>
        </div>

          <div class="divRow">
            <div style="line-height:25px; float:left; width:50%; border:2px solid #fff; border-top:none; border-right:none">
            Subject1
            </div>

            <div style="line-height:25px; float:left; width:49%; border:2px solid #fff; border-top:none">
            Subject2
            </div>
        </div>

        <div class="divRow">
            <div style="width:9%; line-height:25px; float:left; border-right:2px solid #fff; border-left:2px solid #fff">
            0000
            </div>

            <div style="width:9%; line-height:25px; float:left; border-right:2px solid #fff">
            1111
            </div>

            <div style="width:9%; line-height:25px; float:left; border-right:2px solid #fff">
            2222
            </div>

            <div style="width:9%; line-height:25px; float:left; border-right:2px solid #fff">
            -----
            </div>

            <div style="width:9%; line-height:25px; float:left; border-right:2px solid #fff">
            3333
            </div>

            <div style="width:9%; line-height:25px; float:left; border-right:2px solid #fff">
            4444
            </div>

            <div style="width:9%; line-height:25px; float:left; border-right:2px solid #fff">
            5555
            </div>

            <div style="width:9%; line-height:25px; float:left; border-right:2px solid #fff">
            6666
            </div>

            <div style="width:9%; line-height:25px; float:left; border-right:2px solid #fff">
            7777
            </div>

            <div style="width:9%; line-height:25px; float:left; border-right:2px solid #fff">
            8888
            </div>

             <div style="width:8%; line-height:25px; float:left;">
            9999
            </div>
        </div>
</div>

CSS 

<style>
.divTable
    {

        border-color: Gray;
        border: 1px #fff;
        border-spacing: 0.5px;
        border-style: solid;
        position:absolute;
        left:0;
        display: table;
        width: 100%;
        padding: 2px 1px 0px 1px;
         background-color: #CCCCCC;
    }
    .divRow
    {
      display: table-row;
      border:1px solid #fff;
      width:100%;
      position:relative;
      background:#ffcc00
    }

</style>
相关问题
最新问题