css三栏布局 上下两栏固定

在现代化的网页设计中，经常需要用到三栏布局，其中包括左、中、右三个栏目。其中，可以使得左、右两栏具有固定宽度，而中间栏的宽度则随着屏幕宽度的变化而变化，这被称为“三栏布局上下两栏固定”。

要实现这样的布局，我们需要借助CSS中的一些特性。首先，我们可以使用float属性来设置左、右栏目的宽度，并将它们浮动在页面最左侧和最右侧。然后，我们可以设置中间栏目的宽度为100%减去左、右栏目的宽度，这样中间栏目就可以自适应不同屏幕大小的情况。

.left {
    float: left;
    width: 200px;
}
.right {
    float: right;
    width: 200px;
}
.middle {
    width: 100%;
    margin-left: 200px;
    margin-right: 200px;
} 

值得注意的是，在上述代码中，我们还增加了middle类的margin-left和margin-right属性，分别为200px。这样可以避免中间栏目与左、右栏目接触，使得整体布局更加美观。

通过上述CSS代码的配合，我们就可以非常轻松地实现“三栏布局上下两栏固定”的功能，这极大地简化了网页设计人员的工作，并且能够有效提高网页制作的效率。