CSS布局之两列布局

最新推荐文章于 2024-05-04 13:53:08 发布

kht_47471015

最新推荐文章于 2024-05-04 13:53:08 发布

阅读量3.3k

点赞数 2

分类专栏：玩转CSS布局文章标签： css css3 javascript 网页设计小程序

本文链接：https://blog.csdn.net/weixin_47471015/article/details/112504003

版权

玩转CSS布局专栏收录该内容

4 篇文章 0 订阅

订阅专栏

两列布局

两列布局一般情况下是指定宽与自适应布局，两列中左列是确定的宽度，右列是自动填满剩余所有空间的一种布局效果；
左列自适应, 右列定宽

float + margin 属性实现；
float + overflow 属性实现；
display 属性的 table 相关值实现；
使用绝对定位实现；
使用 flex 实现；
使用 Grid 实现；

方案一：float + margin 属性实现

<style>
    *{margin: 0;padding: 0;}

    #left {
      width: 400px;/* 左列定宽 */
      height: 300px;
      background-color: #c9394a;
      float:left;/* 浮动 */
    }

    #right {
      //右列自适应
      height: 400px;
      background-color: #cccccc;
      margin-left: 400px;
    }

    #inner {
      height: 300px;
      background-color: green;
      /* 清除浮动属性会掉下来 */
      clear:both;
    }
  </style>
</head>

<body>
  <div id="left"></div>
  <!-- 自适应容器 -->
  <div id="right">
      <div id="inner"></div>
  </div>
优点：实现方式简单
缺点：自适应元素 margin 属性值需要与定宽元素的 width  属性值保持一致；
     定宽元素浮动与自适应元素不浮动导致浏览器兼容性不好；
右列自适应元素中定义的了加 clear:both 的子级元素会出问题；

方案二: float + margin(fix) 实现

具体方案如下：
给左边一个盒子设置左浮动(float:left;)，右边的盒子套一个 right-fix 并给 right-fix设置右浮动 float: right; 和自适应宽度 width: 100%;
让 right-fix 这个盒子反向移动左盒子宽度的大小 margin-left:-400px;
給左盒子添加一个相对定位，提高他的层级性，从而显示出来
给右边的子容器设置一个 margin-left：400px；

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .left {
        width: 200px;
        height: 300px;
        background-color: blue;
        float: left;//给左边一个盒子设置左浮动
        position: relative;
      }
      .right-fix {
        float: right;//右浮动
        width: 100%;//右宽度自适应
        margin-left: -200px;/*反向移动左盒子的200px，并将其完全盖住，需给子盒子设定  margin-left: 200px;*/
      }
      .right {
        width: 100%;
        height: 400px;
        background-color: chartreuse;
        margin-left: 200px;
      }
    </style>
  </head>
  <body>
    <div class="left"></div>
    <div class="right-fix">
      <div class="right"></div>
    </div>
  </body>
</html>

方案二： float + overflow 属性实现；

具体的：
1.给左边固定宽度盒子加浮动属性float: left;
2.给右边自适应宽度盒子加浮动属性 overflow: hidden;;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .left {
        width: 200px;
        height: 300px;
        background-color: blue;
        float: left;
      }

      .right {
        height: 400px;
        background-color: chartreuse;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="left"></div>
    <div class="right"></div>
  </body>
</html>
优点: 简单易用 全兼容
缺点: overflow 属性不仅解决了两列布局问题，同时设置了内容溢出的情况；

方案三：display 属性的 table 相关值实现

给父元素设置display：table；
给子元素设置display：table-cell；

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>两列布局解决方案4-table+table-cell</title>
  <style>
    *{margin: 0;padding: 0;}

    #parent {
      width: 100%;
      height: 400px;
      /* table */
      display: table;
    }

    #left {
      /* td */
      display:table-cell;
      width: 400px;  /* 定宽 */
      height: 300px;
      background-color: #c9394a;
    }

    #right {
      display:table-cell;
      height: 400px;
      background-color: #cccccc;
    }
  </style>
</head>

<body>
  <div id="parent">
    <div id="left"></div>
    <div id="right"></div>
  </div>
</body>
</html>
优点: 浏览器兼容比较好
缺点: 将所有元素的 display 属性设置为 table 相关值，受到相应制约；

方法四：使用绝对定位实现

1.给左边盒子设置定位 
      position: absolute;
      top:0;
      left:0;
2.给右边的盒子设置
       position: absolute;
       top:0;
       right:0;
       left:400px;

<style>
    *{margin: 0;padding: 0;}

   #parent{
     position: relative;
   }
    #left {
      width: 400px;  /* 定宽 */
      height: 400px;
      background-color: #c9394a;
      position: absolute;
      top:0;
      left:0;

    }

    #right {
      height: 500px;
      background-color: #cccccc;
      position: absolute;
      left:400px;
      right:0;
      top:0;
    }
  </style>
</head>

<body>
  <div id="parent">
    <div id="left"></div>
    <div id="right"></div>
  </div>
</body>

方案五：使用 flex 实现

1.给父元素设置display: flex;
2.给右边自适应设置 flex:1;这相当于100%-左定宽

<style>
    *{margin: 0;padding: 0;}

    #parent{
        width: 100%;
        height: 500px;
        /* 子元素 - 水平排列 */
        display: flex;
    }

    #left {
      width: 400px;  /* 定宽 */
      height: 400px;
      background-color: #c9394a;
    }

    #right {
      /* 100% - 400 */
      flex:1;
      height: 500px;
      background-color: #cccccc;
    }
  </style>
</head>

<body>
  <div id="parent">
    <div id="left"></div>
    <div id="right"></div>
  </div>
</body>

方案六：使用 Grid 实现

1.给父元素设置 display: grid;
2.去掉左右盒子的宽度并给父元素设置 grid-template-columns:400px auto;这表示左边设置400宽度，右边自适应。

 <style>
    *{margin: 0;padding: 0;}
    #parent{
        width: 100%;
        height: 500px;
        /* 网格布局 */
        display: grid;
        /* 每个列的宽度  左 - 400px  右 - 自适应 */
        grid-template-columns:400px  auto;
    }

    #left {
      height: 400px;
      background-color: #c9394a;
    }

    #right {
      height: 500px;
      background-color: #cccccc;
    }
  </style>
</head>

<body>
  <div id="parent">
    <div id="left"></div>
    <div id="right"></div>
  </div>
</body>

kht_47471015

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
CSS布局之两列布局

两列布局两列布局一般情况下是指定宽与自适应布局，两列中左列是确定的宽度，右列是自动填满剩余所有空间的一种布局效果；左列自适应, 右列定宽float + margin 属性实现；float + overflow 属性实现；display 属性的 table 相关值实现；使用绝对定位实现；使用 flex 实现；使用 Grid 实现；方案一：float + margin 属性实现<style> *{margin: 0;padding: 0;} #left
复制链接

扫一扫