IT热点
  • 电脑硬件
  • 手机
  • MP4
  • 品牌机
  • 办公产品
  • 投影机
  • 服务器
  • 奥林巴斯
  • 尼康
  • 佳能
  • 阿尔卡特
  • 索尼
  • 微星
  • 七彩虹
  • 笔记本
  • 数码相机
  • 数码摄像机
  • 惠普
  • 戴尔
  • 联想
  • 诺基亚
  • 摩托罗拉
  • 索尼爱立信
  • LG
  • 西门子
  • 飞利浦
  • 华硕
  • 硕泰克
  • - - - - - - - - - -
    首页 >> 学院 >> 网页制作 >> 网页制作HTMLCSS
    如何像table一样对层div进行轻松布局 [网页制作HTMLCSS]
    网络收集
    2008-4-17 17:50:00 文/

    下面是我翻译的内容,是根据我对文章的理解意译的,你就别挑哪里翻译的不对了,我的目的只是传达这个CSS技巧。

    许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个容器的内容,就象经典表格布局中的单元格控制几个栏目的位置,也喜欢容器的内容居中或顶部对齐显示。
    但是你又不喜欢用table来实现他,那怎么办呢?实现的方法很多,有根据视觉错觉实现的,有用JS控制使高度相等的,还有采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。
    其实有个简单的方法,使用display:table, display:table-row and display:table-cell 就可以实现,而且高度小的容器会自适应那些高度相对较高的,但是IE不支持这个属性,我们先不用去责备IE,相信以后会有所改善的。这里我制作了一个模型。

    先看看xhtml的结构:

    <div class="equal">
        <div class="row">
            <div class="one"></div>
            <div class="two"></div>
            <div class="three"></div>
        </div>
    </div>

    很简单不用解释就能看懂,但是这里给出一个table的结构,是不是很相似

    <table>
     <tr>
      <td></td>
      <td></td>
      <td></td>
     </tr>
    </table>

    下来是css:

    .equal {
      display:table;
      border-collapse:separate;
     }
     .row {
      display:table-row;
     }
     .row div {
      display:table-cell;
     }
     .row .one {
      width:200px;
     }
     .row .two {
      width:200px;
     }
     .row .three {
      
     }

    解释:

    1.dispaly:table;让层.equal作为块级元素的表格table显示,也就是将他作为一个表格
    2.border-collapse:separate;边框独立,就像表格没有合并单元格以前
    3.display:table-row;将.row作为表格行tr显示
    4.display:table-cell;将.row的下级div作为表格单元格td显示
    5.然后定义宽度

    这里还使用了 border-spacing:10px;来区别几个盒子,正如上面所陈述的,IE下不能正常显示,但是在:Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8b, and Netscape 7.1经过测试均可以完美显示.


    ·IT产品报价大全
    更多相关: 手机
    在百度中更多内容: 手机




    打印此 投稿与建议 返回顶部

    相关文章
    ·初学DIV+CSS应该理解HTML标签的语义
    ·DIV+CSS常用的网页布局代码
    ·DIV+CSS常用的网页布局代码
    ·学DIV+CSS技术,如何入门?
    ·另一个角度谈谈DIV+CSS