[分享]css两栏布局和三栏布局

CSS是一种网页设计语言，我们可以使用CSS对页面进行美化和排版。常见的排版方式有两栏布局和三栏布局。两栏布局指的是页面被分为左右两个部分，通常用于显示文章内容或产品信息。我们可以使用CSS的floa...

CSS是一种网页设计语言，我们可以使用CSS对页面进行美化和排版。常见的排版方式有两栏布局和三栏布局。

两栏布局指的是页面被分为左右两个部分，通常用于显示文章内容或产品信息。我们可以使用CSS的float属性来实现两栏布局：

 .left {
        float: left;
        width: 200px;
    }
    .right {
        float: left;
        width: calc(100% - 200px);
    } 

上面的代码中，.left表示左侧区域，使用float:left来向左浮动，宽度为200px；.right表示右侧区域，也使用float:left来向左浮动，其宽度等于页面总宽度减去左侧宽度。

三栏布局指的是页面被分为左中右三个部分，通常用于显示各种信息。我们可以使用浮动和相对定位来实现三栏布局：

 .left {
        float: left;
        width: 200px;
    }
    .right {
        float: right;
        width: 200px;
    }
    .center {
        margin: 0 200px;
        position: relative;
    }
    .center .inner {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 600px;
        height: 400px;
    } 

上面的代码中，.left表示左侧区域，使用float:left来向左浮动，宽度为200px；.right表示右侧区域，使用float:right来向右浮动，宽度为200px；.center表示中央区域，使用margin来留出左右两个宽度为200px的空白，使其与左右区域相邻，而.center .inner则是.center的内部元素，使用position:relative来定位，并用left:50%和transform:translateX(-50%)使其居中显示。

总之，通过CSS的浮动和定位技巧，我们可以轻松实现各种页面布局效果。