Question

我想知道将表格布局替换为div的方法最好。我自己一直在尝试一些，但它非常混乱了我的4x4 div。我猜这个有经验做这些事情并不是很难完成，但我对div很新，并试图学习这个：）

看看这个，并分享你的意见，如果表格保持原样，或者是否应该用div替换：http://jsfiddle.net/CZdux/

<table align="center" border="0">
  <tr>
    <td width="430" rowspan="3">    
        <div class="container">
            <div id="a1" class="card"></div>
            <div id="a2" class="card"></div>
            <div id="a3" class="card"></div>
            <div id="a4" class="card"></div>
            <div id="a5" class="card"></div>
            <div id="a6" class="card"></div>
            <div id="a7" class="card"></div>
            <div id="a8" class="card"></div>
            <div id="a9" class="card"></div>
            <div id="a10" class="card"></div>
            <div id="a11" class="card"></div>
            <div id="a12" class="card"></div>
            <div id="a13" class="card"></div>
            <div id="a14" class="card"></div>
            <div id="a15" class="card"></div>
            <div id="a16" class="card"></div>
        </div>   
    </td>
    <td width="161" height="95" align="center" valign="middle">LOGO</td>
  </tr>
  <tr>

Answer 1

将表格布局替换为divs最好的方法是什么？

使用显示属性重新格式化所有内容。 ;）

HTML

<div class="table-div" style="width:100%">
    <div class="tr-div">
        <div class="td-div">td-div 1a</div>
        <div class="td-div">td-div 2a</div>
        <div class="td-div">td-div 3a</div>
    </div>
    <div class="tr-div">
        <div class="td-div">td-div 1b</div>
        <div class="td-div">td-div 2b</div>
        <div class="td-div">td-div 3b</div>
    </div>
</div>

CSS

.table-div{display:table}
.tr-div{display:table-row}
.td-div{display:table-cell;border:1px solid silver}

jsFiddle here

Answer 2

浮动列

在这种情况下不需要HTML表。

HTML表格适用于数据网格，但对于一般布局（建立列等），浮点数几乎总是最佳选择（如@GrantMynott建议的那样）。虽然此页面上的卡片以网格图案显示，但它实际上并不是数据网格。

如果在CSS文件中添加了clearfix，则可以大大简化浮点数（以及创建列）的使用。每次有一个带有浮动列的容器时，都会将clearfix类添加到容器中。然后，您不必担心清除浮动列的详细信息。

这是一个例子，使用传统版本的clearfix（这是一个很好的版本）：

/* Traditional clearfix */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

/* Custom CSS for the page layout */
.columns .column1 {
    float: left;
    width: 430px;
}
.columns .column2 {
    float: left;
    width: 161px;
}
....
<div class="columns clearfix">
    <div class="column1">Card grid goes here...</div>
    <div class="co1umn2">All content to the right of card grid goes here...</div>
</div>
<div id="msg"></div>

此示例使用CSS类的通用名称（“columns”，“column1”，column2“）。可以根据需要使用对相关页面更有意义的名称。

<强>更新

查看修改过的演示后：

有一个类名为“co12”的拼写错误，导致该列无法浮动。我将名称更新为“column2”，以减少这种错字。
最好在卡片容器中添加一个clearfix（因为卡片是浮动的），为了安全起见。目前，卡片容器本身就是左栏，所以它会被添加到那里。
这可能是个人偏好，但我发现将所有列放在同一方向（通常是左侧）比使左侧浮动和右侧浮动一些混合更安全。在某些情况下（或者至少在旧浏览器上），同一容器中的混合方向并不稳定，但在大多数情况下，这样做是安全的。

Updated demo

此时，您只需要在右侧列的内容中添加高度或垂直边距（或填充）。我在徽标图像周围添加了一个div容器，以使其更容易一些。也可以选择在按钮周围设置一个div容器，不过你可以管理它。

Answer 3

我认为你正在寻找CSS浮动属性。

您需要将游戏方块向左浮动，并在右侧有另一个容器用于统计/徽标等：

.game-container { float: left; width: 430; }
.stats-container { float: right; width: 161; }
.logo { height: 95; width: 100%; }
.scoreboard { height: 148; width: 100%; }
.restart { height: 148; width: 100%; }
#msg { clear: both; } /* Append to pre-existing identifier to display below immediate left and right floated content */

然后将您的内容放入其中，因为div是一个块元素，统计信息容器中的元素将垂直显示：

<div class="game-container">
    <div class="container">
        <div id="a1" class="card"></div>
        ...
    </div>
</div>
<div class="stats-container">
    <div class="logo">LOGO</div>
    <div class="scoreboard"></div>
    <div class="restart"><input id="clicky" type="button" value="Restart"/></div>
</div>
<div id="msg"></div>

Answer 4

以上所有都很好但是...... 直到所有实验性css属性都无法在浏览器上使用，您将发现很难用divs dl dt dd替换有关垂直对齐或背景高度的表格，其中需要相同的时候例如，您正在调整窗口大小，或者在具有嵌套div的dl dt dd的情况下，并在其中包装文本。我仍然认为，在许多情况下，将表替换为其他元素是一种不好的方法。尽管所有人都很好想，但是表格可以完全按照需要对显示元素进行完全控制。

使用div而不是表格进行布局

4 个答案: