稳定灵活的 HTML 列式布局

主要特点：

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

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

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

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。