布局与divs而不是表格

Question

我想知道什么样的方式将是最好的表格替换为divs。我一直在尝试一些自己，但它非常困扰我的4x4 divs。我猜这是不是很难完成，当有经验做这种事情，但我都是新来的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

飘来列

没有必要的在这种情况下，HTML表格。

HTML表格适用于数据网格，但对于总体布局（建立列等），浮动几乎总是最佳选择（如@GrantMynott建议的那样）。尽管此页面上的卡片以网格模式显示，但它不是真正的数据网格。

如果你添加一个clearfix到你的CSS文件中，你可以大大简化浮点数的使用（并创建列）。每次你有一个带有浮动列的容器，你都可以将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类的通用名称（“列”，“列1”， 。列2" ）是有问题的网页更有意义的名称，可以根据需要使用

更新

看着你修改后的演示。

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

Updated demo

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

Answer 2

我认为你正在寻找CSS的float属性。

您需要浮动游戏广场的左侧，并有统计/标志等其他容器右边：

.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 3

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

重新格式化所有内容，如display property。 ;）

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 4

所有上面是非常好的，但... 直到所有实验的CSS属性是不可用的浏览器，你会发现很难用垂直对齐或背景高度的divs dl dt dd元素替换表格，它们需要相同例如，当你正在调整窗口大小，或者在嵌套div的dl dt dd的情况下，以及将文本封装在内部。 我仍然认为，在许多情况下，用其他元素替换表格是一种不好的方法。尽管所有的想法都很好，但桌子可以完全控制显示元素，完全符合他们的需求。