比Table灵活的DIV标签。
网页制作的过程中，难免要对网页中的元素进行排版布局。最开始的时候，流行的方法是用Table标签进行网页布局。因为，众所周知的原因：“速度”。表格标签在嵌套过多的时候，网页在显示的时候会变慢。人们就开始使用Div标签进行布局。
表格是现实生活中最常见的二维表示形式，很好理解。从个人角度来看，表格表示一行一行的明细信息的时候，很方便。但在，纵向首先描述“列”的时候，Div标签更合适，更灵活一些。
下面列出，类似表格行明细的Div实现代码。
CSS样式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <style>
.afooter {
float : none;
alignment-adjust: center;
}
.afooter-list {
float : left;
alignment-adjust: center;
}
.afooter-list-bottom {
float : none;
alignment-adjust: center;
}
</style>
|
HTML代码：（演示1）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div class="afooter">
<div class="afooter-list">a</div>
<div class="afooter-list">b</div>
<div class="afooter-list">c</div>
<div class="afooter-list">d</div>
<div class="afooter-list-bottom">e</div>
</div>
<div class="afooter">
<div class="afooter-list">e</div>
<div class="afooter-list">f</div>
<div class="afooter-list">g</div>
<div class="afooter-list">h</div>
<div class="afooter-list-bottom">i</div>
</div>
|
上面这段代码，用Table标签写，如下：（演示3）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <table>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>h</td>
<td>i</td>
<td>j</td>
<td>h</td>
<td>i</td>
</tr>
</table>
|
其实，所谓的灵活，是指代码从机制给你提供了灵活操作的可能，在这个基础上来讲，运用的灵活不灵活，取决于人编码者。
CSS样式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <style>
.cfooter {
float : left;
alignment-adjust: center;
}
.cfooter-list {
float : none;
alignment-adjust: center;
}
.cfooter-list-bottom {
float : none;
alignment-adjust: center;
}
.dfooter {
float : none;
alignment-adjust: center;
}
.dfooter-list {
float : none;
alignment-adjust: center;
}
.dfooter-list-bottom {
float : none;
alignment-adjust: center;
}
</style>
|
HTML代码：（演示2）
[code]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div class="cfooter">
<div class="cfooter-list">1</div>
<div class="cfooter-list">2</div>
<div class="cfooter-list">3</div>
<div class="cfooter-list">4</div>
</div>
<div class="dfooter">
<div class="dfooter-list">5</div>
<div class="dfooter-list">6</div>
<div class="dfooter-list">7</div>
<div class="dfooter-list">8</div>
</div>
</div>
|
这里可能需要多说的是，每个Div层次，在默认的时候，每个Div元素都是需要换行的。每个Div元素都不在一行，但是这个可以情况可以通过改变CSS样式来改变，如上面代码中的“float : none;”属性设置。在这篇代码里，float的left表示，后面的div元素，紧接着其后不换行，而none属性表示，先一个div层开始，div元素就换行了，不在一行了。
Div比较灵活，至于怎么运用，取决于编码者。可以用Div表示类似于表格的明细信息，也可以应用于比较复杂的图片布局。
实际的运行效果，可以看下面的连接：
运行效果演示