HTML板块左右排列布局——左侧 DIV 固定宽度，右侧 DIV 自适应宽度，填充满剩余页面

要实现左侧DIV固定宽度，右侧DIV自适应宽度并填充剩余页面的布局，可以使用CSS的浮动（float）属性和calc()函数。以下是实现这种布局的示例代码：

HTML:

<div class="container">
    <div class="left">左侧内容</div>
    <div class="right">右侧内容 - 这里的宽度会自适应填充剩余空间</div>
</div>

CSS:

.container {
    overflow: hidden; /* 清除浮动 */
}
 
.left {
    float: left; /* 左侧DIV左浮动 */
    width: 200px; /* 左侧DIV固定宽度 */
    background-color: #ddd; /* 背景色，仅为了视觉效果 */
}
 
.right {
    margin-left: 200px; /* 右侧DIV左边距设置为左侧DIV宽度 */
    background-color: #f3f3f3; /* 背景色，仅为了视觉效果 */
    overflow: auto; /* 右侧内容过多时可滚动 */
}
 
/* 额外的样式，用于美化效果 */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
}
 
.container, .left, .right {
    height: 100%;
}

这段代码中，.left类使得左侧DIV浮动并设置了固定宽度，.right类的左边距设置为200px（即左侧DIV的宽度），使得右侧DIV能够自适应宽度并填充剩余空间。通过给.container设置overflow: hidden;，可以清除浮动，避免影响其他内容。