CSS常用布局之——等分等高解决方案

html-css048

CSS常用布局之——等分等高解决方案,第1张

先看看等分的布局方案

1. float

兼容性较好（IE 8以上）

**2. flex **

兼容性较差（flex属于css3）

兼容性：IE8及以上

3. table

兼容性：可以兼容 IE 8

1. table

利用 table 的特性——每列等宽

2. flex

3. float

伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 兼容性较好。

把框架改成表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

body{width:960px}

.container{border:2px solid purple}

.mainContent{ margin:0 260pxborder:2px dashed redcolor:redwidth:40%}

.sidebar1{background-image:url(../images/sidebar1Back.gif)width:30%height:100%border:1px dashed red}

.sidebar2{border:1px double blue}

.clearfloat{clear:both}

.footer{border:1px dashed purple}

</style>

</head>

<body>

<center>

<table width="960">

<tr>

<td class="sidebar1">

<table><td>sidebar1</td></table>

</td>

<td class="mainContent">

<table><td>mainContent</td></table>

</td>

<td class="sidebar2">

<table><td>sidebar2</td></table>

</td>

</tr>

</table>

</center>

</body>

</html>