css两栏布局、三栏布局、弹性布局

最新推荐文章于 2023-04-15 17:32:30 发布

Leadingme

最新推荐文章于 2023-04-15 17:32:30 发布

阅读量765

点赞数

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

本文链接：https://blog.csdn.net/weixin_43388615/article/details/105086848

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

两栏布局

说明：一栏定宽，一栏自适应。这样子做的好处是定宽的那一栏可以做广告，自适应的可以作为内容主体。
实现方式： ① float + margin ② 使用position的absolute

  例： float+margin

          <body>
                <div class="left">定宽</div>
                <div class="right">自适应</div>
       </body>
       .left{
              width: 200px;
              height: 600px;
              background: red;
              float: left;
              display: table;
              text-align: center;
              line-height: 600px;
              color: #fff;
             }
        .right{
            margin-left: 210px;
            height: 600px;
            background: yellow;
            text-align: center;
            line-height: 600px;
            }

三栏布局

特点：两边定宽，然后中间的width是auto的，可以自适应内容，再加上margin边距，来进行设定
实现方式：
- 使用左右两栏使用float属性，中间栏使用margin属性进行撑开
- 使用position定位实现，即左右两栏使用position进行定位，中间栏使用margin进行定位

  例:  float+margin

         <body>

                 <div class="left">左栏</div>
                 <div class="right">右栏</div>
                 <div class="middle">中间栏</div>

         </body>
         .left{
               width: 200px;

               height: 300px; 

               background: yellow;

               float: left;    
             }
         .right{
                width: 150px;

                height: 300px; 

                background: green;

                float: right;
              }
         .middle{
                 height: 300px;

                 background: red;

                 margin-left: 220px;

                 margin-right: 160px;
               }

   例：position +magin

       <body>

             <div class="left">左栏</div>
             <div class="middle">中间栏</div>
             <div class="right">右栏</div>

         </body>
         .left{
               background: yellow;
               width: 200px;
               height: 300px;
               position: absolute;
               top: 0;
               left: 0;
             }
         .middle{
                height: 300px;
                margin: 0 220px;
                background: red;
            }
         .right{
               height: 300px;
               width: 200px;
               position: absolute;
               top: 0;
               right: 0;
               background: green;
           }

弹性布局

说明：弹性盒子（Flexbox）布局是一种为一维布局而设计的布局方法。一维是你希望内容是按行或者列来布局。可以使用display: flex来将元素变为弹性布局

   例：

        .container {
                       display: flex;
                       }

       <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
      </div>

  注：该容器的直接子元素会变为弹性项（flex item），并按行排列

Leadingme

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css两栏布局、三栏布局、弹性布局

两栏布局说明：一栏定宽，一栏自适应。这样子做的好处是定宽的那一栏可以做广告，自适应的可以作为内容主体。实现方式： ① float + margin ② 使用position的absolute 例： float+margin <body> <div class="left">定宽</div&...
复制链接

扫一扫

专栏目录