3

我想知道将表格布局替换为 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>
4

4 回答 4

7

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

使用display属性重新格式化所有内容，如表格。;)

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在这里

于 2013-03-26T13:46:17.460 回答
3

浮动柱

在这种情况下，不需要 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（因为卡片是浮动的）。目前，cards 容器是左侧列本身，因此将在此处添加。
  • 这可能是个人喜好，但我发现将所有列浮动在同一方向（通常是左侧）比混合一些向左浮动和一些向右浮动更安全。在某些情况下（或者至少在旧版浏览器上），在同一个容器中混合方向并不那么稳定，尽管在大多数情况下这样做是安全的。

更新的演示

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

于 2013-03-26T02:24:22.693 回答
1

我认为您正在寻找 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 是一个块元素，那些在 stats 容器中的元素将垂直显示：

<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>
于 2013-03-26T00:52:22.283 回答
1

以上所有内容都非常好，但是......直到所有实验性 css 属性在浏览器上不可用，你会发现很难用 divs dl dt dd 元素替换表格关于垂直对齐或背景高度，它需要例如，当您调整窗口大小或在具有嵌套 div 的 dl dt dd 的情况下，以及将文本包装在其中时，也是相同的。我仍然认为，在许多情况下，用其他元素替换表格是一种不好的方法。尽管所有的想法都很好，但表格可以让您完全控制显示元素，就像它们需要的那样。

于 2017-05-25T08:39:11.490 回答