比Table灵活的DIV标签。

2016-09-17

topic

3k 词

网页制作的过程中，难免要对网页中的元素进行排版布局。最开始的时候，流行的方法是用Table标签进行网页布局。因为，众所周知的原因：“速度”。表格标签在嵌套过多的时候，网页在显示的时候会变慢。人们就开始使用Div标签进行布局。

表格是现实生活中最常见的二维表示形式，很好理解。从个人角度来看，表格表示一行一行的明细信息的时候，很方便。但在，纵向首先描述“列”的时候，Div标签更合适，更灵活一些。

下面列出，类似表格行明细的Div实现代码。

CSS样式：

<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）

<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）

<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样式：

<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]

    <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表示类似于表格的明细信息，也可以应用于比较复杂的图片布局。

实际的运行效果，可以看下面的连接：
运行效果演示

最新文章

归档

比Table灵活的DIV标签。