你的位置:首页 > 网页设计

[网页设计]稳定灵活的 HTML 列式布局

主要特点:

  1. 所有列轻松实现相同高度
  2. 兼容性极高

------------------------------------------------ 代码 -----------------------------------------------------

<!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>