CSS布局带来的巨大影响:CSS display属性值

2019-03-14 19:28:49于海丽

这份HTML源代码满足了内容呈现方面的要求。先是导航栏,然后是附加栏,最后是内容栏。
我们同样需要将以下CSS样式应用上去:
#main {
display: table;
border-collapse: collapse;
}

#nav {
display: table-cell;
width: 180px;
background-color: #e7dbcd;
}

#extras {
display: table-cell;
width: 180px;
padding-left: 10px;
border-right: 1px dotted #d7ad7b;
}

#content {
display: table-cell;
width: 380px;
padding-left: 10px;
}
这种基于表格的新CSS布局方式能够正确的在IE8、Firefox、Safari和Opera(译者注:包括FF2/FF3/Google都通过了测试)中显示出来。下面这张图片是它在IE8中的样子:
我们轻松实现了三栏等高布局,而无需使用伪造背景图片之类的技巧,更不用担心定位和清除浮动的问题!
上一页12 3 下一页 阅读全文