css布局实例-网页布局的方法

实现的方法多种多样。有些设计师利用视觉错觉来达到目的，有些则使用JavaScript来控制容器的高度相等。还有设计师采用容器溢出部分隐藏、列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。其实，有一种简单的方法可以实现这种布局，那就是使用CSS的display属性。通过设置display:table、display:table-row和display:table-cell，可以轻松实现等高容器的并排布局。在这种布局中，高度较小的容器会自动适应高度较高的容器。遗憾的是，这一属性在IE浏览器中并不被支持。相信随着时间的推移，这一问题会得到改善。

下面是一个简单的示例。看一下XHTML结构：

```html

```

```css

.equal {

display: table;

border-collapse: separate;

}

.row {

display: table-row;

}

.row div {

display: table-cell;

}

.row .one {

width: 200px;

}

.row .two {

width: 200px;

}

```

解释一下：

5. 通过定义宽度来控制每个容器的宽度。

这里还使用了border-spacing:10px;来区分各个盒子。尽管这种方法在IE浏览器下无法正常工作，但在Mozilla、Opera、Safari、Firefox以及其他浏览器中都可以完美显示。若想了解更多关于这一布局的细节，请观看本站的相关频道。