CSS实现三列布局方法汇总

最新推荐文章于 2023-06-23 19:33:50 发布

秦理

最新推荐文章于 2023-06-23 19:33:50 发布

阅读量3k

点赞数

分类专栏：前端开发文章标签： css html flex css3

本文链接：https://blog.csdn.net/qq_42889406/article/details/108697103

版权

前端开发专栏收录该内容

26 篇文章 6 订阅

订阅专栏

未设置时原布局效果，div垂直排列
在这里插入图片描述

方法一：浮动

 <style>
     .con{width: 100%; }
     .con>div{height: 500px; }
     .left{width:20%;float:left;background-color: pink; }
     .center{ width: 60%;float: left;background-color: yellowgreen;}
     .right{width:20%;float:left;background-color: skyblue;}
    </style>

<body>
    <div class="con">
        <div class="left">左</div>
        <div class="center">中</div>
        <div class="right">右</div>
    </div>
</body>

在这里插入图片描述
方法二：绝对定位

 <style>
        .con{ width: 100%; }
        .con>div{height: 500px; }
       .left{
           position:absolute;
           top: 0px; 
           left: 0px;
           width:20%;
           background-color: pink; }
     .center{ 
        position:absolute;
           top: 0px; 
           left: 20%;
         width: 60%;
         background-color: yellowgreen;}
     .right{
        position:absolute;
           top: 0px; 
           left: 80%;
         width:20%;
         background-color: skyblue;}
    </style>

<body>
    <div class="con">
        <div class="left">左</div>
        <div class="center">中</div>
        <div class="right">右</div>
    </div>
</body>

在这里插入图片描述
方法三：Flex布局

<style>
        .con{
            display: flex;
            width: 100%;
             }
             
        .con>div{height: 500px; }
       .left{
           width:20%;
           background-color: pink; }
     .center{ 
         width: 60%;
         background-color: yellowgreen;}
     .right{
         width:20%;
         background-color: skyblue;}
    </style>

<body>
    <div class="con">
        <div class="left">左</div>
        <div class="center">中</div>
        <div class="right">右</div>
    </div>
</body>

在这里插入图片描述
方法四：table布局

  <style>
        .con{
            width: 100%;
             }
             
        .con>div{height: 500px; }
       .left{
           display: table-cell;
           width:200px;
           background-color: pink; }
     .center{ 
        display: table-cell;
         width: 600px;
         background-color: yellowgreen;}
     .right{
        display: table-cell;
         width:200px;
         background-color: skyblue;}
    </style>

 <div class="con">
        <div class="left">左</div>
        <div class="center">中</div>
        <div class="right">右</div>
    </div>

在这里插入图片描述

秦理

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS实现三列布局方法汇总

未设置时原布局效果，div垂直排列方法一：浮动 <style> .con{width: 100%; } .con>div{height: 500px; } .left{width:20%;float:left;background-color: pink; } .center{ width: 60%;float: left;background-color: yellowgreen;} .right{width:20%;float:l
复制链接

扫一扫

专栏目录