稳定灵活的 HTML 列式布局

最新推荐文章于 2024-07-19 13:18:23 发布

asxxf

最新推荐文章于 2024-07-19 13:18:23 发布

阅读量413

点赞数

分类专栏：笔记文章标签： HTML

本文链接：https://blog.csdn.net/asxxf/article/details/53319001

版权

笔记专栏收录该内容

72 篇文章 0 订阅

订阅专栏

主要特点：

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

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

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