css布局实例:网页布局的办法 |
发布时间:2019-05-18 文章来源:本站 浏览次数:2630 |
许多网页规划师都喜爱,将两个或者多个容器等高的并排放置,并在里面展现每个容器的内容,就象经典表格布局中的单元格操控几个栏目的位置,也喜爱容器的内容居中或顶部对齐显现。 可是你又不喜爱用table来完成他,那怎么办呢?完成的办法许多,有根据视觉幻觉完成的,有用JS操控使高度相等的,还有采用容器溢出部分躲藏和列的负底鸿沟和正的内补丁相结合的办法来处理列高度相同的问题。 其实有个简单的办法,运用display:table, display:table-row and display:table-cell 就可以完成,并且高度小的容器会自适应那些高度相对较高的,可是IE不支持这个特点,我们先不必去责备IE,相信今后会有所改善的。这里我制造了一个模型。 先看看xhtml的结构: <div class="equal"> 很简单不必解说就能看懂,可是这里给出一个table的结构,是不是很相似 <table> 下来是css: equal { } 解说: 1.dispaly:table;让层.equal作为块级元素的表格table显现,也就是将他作为一个表格 这里还运用了 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经过测试均可以完美显现 |