主要特点:
- 所有列轻松实现相同高度
- 兼容性极高
------------------------------------------------ 代码 -----------------------------------------------------
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="cache-control" content="private" />
<style>
.col-layout {
height: 400px; /*布局的原始高度*/
border-collapse: collapse;
}
.col-layout .col {
padding: 0;
vertical-align: top;
}
.col-layout .left.col {
background-color: #557175;
}
.col-layout .right.col {
background-color: #635370;
}
.col-layout .col-content {
overflow: hidden;
}
.col-layout .left.col .col-content {
width: 400px; /*列宽度*/
}
.col-layout .right.col .col-content {
width: 600px;
}
</style>
</head>
<body>
<table class="col-layout">
<tr>
<td class="left col">
<div class="col-content">
<!--列的真正内容-->
<div style="height: 1000px; width: 2000px; background-color: #83dcbe">Will be hidden</div>
</div>
</td>
<td class="right col">
<div class="col-content">
</div>
</td>
</tr>
</table>
</body>
</html>