Demo Fiddle

Question

我想使用div元素来创建类似于表格的布局。

我想要什么

＆＃13;

.tableStyle td {
  background: red;
  color: #fff
}

.contentBox {
  min-height: 200px;
}

＆＃13;

<table class="tableStyle" width="100%" cellspacing="10">
  <tr>
    <td width="25%">
      <div class="contentBox">One</div>
    </td>
    <td width="25%">Two</td>
    <td width="50%" colspan="2">Three</td>
  </tr>
  <tr>
    <td colspan="2">
      <div class="contentBox">Four</div>
    </td>
    <td colspan="2">Five</td>
  </tr>
</table>

＆＃13;

我有什么

＆＃13;

.table {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 10px;
  color: #fff
}

.table .row {
  display: table-row;
}

.table .table-cell {
  display: table-cell;
  background: red;
  width: 50%;
}

.contentBox {
  min-height: 200px;
}

.table .smlCell {
  width: 25%;
}

.table .table {
  border-spacing: 0;
}

＆＃13;

<div class="table">
  <div class="row">
    <div class="table-cell">
      <div class="table">
        <div class="row">
          <div class="table-cell smlCell">
            <div class="contentBox">One</div>
          </div>
          <div class="table-cell smlCell">
            Two
          </div>
        </div>
      </div>
    </div>
    <div class="table-cell">Three</div>
  </div>
  <div class="row">
    <div class="table-cell">
      <div class="contentBox">Four</div>
    </div>
    <div class="table-cell">Five</div>
  </div>
</div>

＆＃13;

我想在标记为＆＃34; One＆＃34;的单元格之间具有相等的间距。和＆＃34;两个＆＃34;。

我还希望连续的所有单元格都具有相同的高度。

在网上搜索后，我知道存在一些限制或问题对于display: table，例如缺少colspan / rowspan等价物，这可能有助于我尝试完成的任务。

无论如何（除<table>之外）还有这个吗？

Answer 1

当然有！

Demo Fiddle

HTML

<div class='table'>
    <div class='row'>
        <div class='table'>
            <div class='cell'>One</div>
            <div class='cell'>Two</div>
        </div>
        <div class='cell'>Three</div>
    </div>
    <div class='row'>
        <div class='cell'>Four</div>
        <div class='cell'>Five</div>
    </div>
</div>

CSS

html, body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.table {
    display:table;
    width:100%;
    height:100%;
}
.cell {
    display:table-cell;
    width:50%;
}
.row {
    display:table-row;
}
.cell {
    background:red;
    color:white;
    border:5px solid white;    
}

Answer 2

试试这个。我使用内联而不是CSS类。你把一个div放在错误的位置。

<div class="table">
    <div class="row">
        <div class="table-cell">
            <div class="table">
                <div class="row">
                    <div class="table-cell smlCell">
                        <div style="width:50% float: left" class="contentBox">One
                      </div>

                    <div style="width:50% float: right" class="contentBox">
                        Two
                    </div>
                      </div>
                </div>
            </div>
        </div>
        <div class="table-cell">Three</div>
    </div>
    <div class="row">
        <div class="table-cell">
            <div class="contentBox">Four</div>
        </div>
        <div class="table-cell">Five</div>
    </div>
</div>

Answer 3

支持旧版（ms-explorer？）。但是如果你的内容是按照它的性质来表，那就使用表而不是那些技巧： - ）

<!DOCTYPE HTML>
<html>
    <head>
        <title>Bla!</title>
        <style type='text/css'>
            /* reset sizing model ... */
            * { box-sizing: border-box; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; }
            /* basic div definitions */
            div { display:inline-block; min-height:50px; background-color:red; border:solid 3px white; }
            /* 1/2 line div */
            div.half { width:50%; }
            /* 1/4 line div */
            div.quater { width:25%; }

        </style>
    </head>
    <body class='body' id='body' >
        <div class='quater'> One </div><div class='quater'> Two </div><div class='half'> Three </div><div class='half'> Four </div><div class='half'> Five </div>

    </body>
</html>

Colspan替代基于<div>的结构</div>

3 个答案:

Demo Fiddle