要实现两栏布局，右侧自适应，可以使用CSS的浮动属性（float）。具体实现方法如下：
HTML：
复制代码
<div class="container">
<div class="left">左侧内容</div>
<div class="right">右侧内容</div>
</div>
CSS：
复制代码
.container {
width: 100%;
overflow: auto; /* 防止浮动元素溢出容器 */
}
.left {
float: left; /* 左侧元素向左浮动 */
width: 20%; /* 左侧元素宽度占整个容器的20% */
}
.right {
float: right; /* 右侧元素向右浮动 */
width: 80%; /* 右侧元素宽度占整个容器的80% */
}
这样就可以实现两栏布局，右侧自适应。左侧元素宽度固定为20%，右侧元素宽度固定为80%。如果右侧元素内容较少，就会自动调整到左侧元素的下方，而不是右侧。
要实现三栏布局，中间自适应，可以使用CSS的Flexbox布局。具体实现方法如下：
HTML：
复制代码
<div class="container">
<div class="left">左侧内容</div>
<div class="middle">中间内容</div>
<div class="right">右侧内容</div>
</div>
CSS：
复制代码
.container {
display: flex; /* 设置容器为Flexbox布局 */
justify-content: space-between; /* 左右两侧元素间隔均匀分布 */
}
.left {
width: 20%; /* 左侧元素宽度占整个容器的20% */
}
.middle {
flex-grow: 1; /* 中间元素自动填充剩余空间 */
}
.right {
width: 20%; /* 右侧元素宽度占整个容器的20% */
}
这样就可以实现三栏布局，中间自适应。左侧元素和右侧元素宽度固定为20%，中间元素自动填充剩余空间。如果中间元素内容较少，就会自动调整到左侧元素的下方，而不是中间。
