主要特点:
- 所有列轻松实现相同高度
- 兼容性极高
------------------------------------------------ 代码 -----------------------------------------------------
<!DOCTYPE html>
<html <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 >
<tr>
<td >
<div >
<!--列的真正内容-->
<div >Will be hidden</div>
</div>
</td>
<td >
<div >
</div>
</td>
</tr>
</table>
</body>
</html>
原标题:稳定灵活的 HTML 列式布局
关键词:HTML