css常用布局之三列布局学习

最新推荐文章于 2023-02-02 19:09:05 发布

残破的羽衣

最新推荐文章于 2023-02-02 19:09:05 发布

阅读量160

点赞数

本文链接：https://blog.csdn.net/qq_42946499/article/details/107762603

版权

本文介绍了CSS中的两种经典三列布局——圣杯布局和双飞翼布局。详细讲解了如何通过position、float、position+float、flex以及calc方法实现这两大布局，并提供了每种方法的具体步骤和代码示例。

摘要由CSDN通过智能技术生成

css常用布局之三列布局学习

css常用布局之三列布局学习

css常用布局之三列布局学习

圣杯布局

圣杯布局就是左右两边大小固定不变，中间宽度自适应

使用position实现

步骤
1. 首先main,left,rigth放在main中,center放在最前面
```
<div class="main">
    <div class="center">中间</div>
    <div class="left">左</div>
    <div class="right">右</div>
</div>
```
2. main设置width:100%,定位设置成绝对定位relative,设置两边的padding
3. center设置width:100%
4. left设置宽度为第二步所设置的padding,定位设置为相对定位absolute,设置left,top:0
5. rigth设置宽度为第二步所设置的padding,定位设置为相对定位absolute,设置rigth:left.width+rigth.width,top:0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
    
        margin: 0;
        padding: 0;
        color: black;
        font-size: 45px
    }
    .main div{
    
        box-sizing: border-box;
    }
    .main{
    
       width: 100%;
       background: red;
       position: relative;
       padding-left: 200px;
       padding-right: 200px;
    }
    .center{
    
        width: 100%;
        background: pink
    }
    .left{
    
       background: yellow ;
       width: 200px;
      position: absolute;
      left: 0;
      top: 0;
    }
    .right{
    
       background: blue ;
       width: 200px;
        position: absolute;
      top: 0;
      right:400px;
    }
</style>
</head>
<body>
    <div class="main">
        <div class="center">中间</div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
</

最低0.47元/天解锁文章

残破的羽衣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css常用布局之三列布局学习

css常用布局之三列布局学习圣杯布局圣杯布局就是左右两边大小固定不变，中间宽度自适应使用position实现步骤首先main,left,rigth放在main中,center放在最前面<div class="main"> <div class="center">中间</div> <div class="left">左</div> <div class="right">右</div>
复制链接

扫一扫