CSS两列布局——左侧宽度固定，右侧宽度自适应的3种方法

 

1.左侧绝对定位法

直接看代码：

<!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>CSS两列布局——第一种方法</title>
  <style>
    .left {
      position: absolute;
      height: 500px;
      width: 300px;
      background: #333;
      color: #ccc;
    }
    .right {
      height: 500px;
      background: #ddd;
      margin-left: 300px;
    }
  </style>
</head>
<body>
  <div class="left">
    左侧设置绝对定位
  </div>
  <div class="right">
    右侧左边距margin-left设为左侧的宽度，这是关键
  </div>
</body>
</html>

效果如下：

关键点在于.left的position:absolute和.right的margin-left:300px;

 

2.左侧浮动法（右侧不浮动）

<!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>CSS两列布局——第二种方法</title>
  <style>
    .left {
      float: left;
      height: 500px;
      width: 300px;
      background: #333;
      color: #ccc;
    }
    .right {
      overflow: auto;
      height: 500px;
      background: #ddd;
    }
  </style>
</head>
<body>
  <div class="left">
    左侧设置左浮动
  </div>
  <div class="right">
    右侧设置overflow:auto
  </div>
</body>
</html>

效果如下：

关键点：左侧设置左浮动，右侧设置overflow:auto，我也不知道为什么这样就有效，以后知道了来补充。

 

3.Flex布局法（建议移动端页面使用）

<!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>CSS两列布局——第三种方法，flex布局</title>
  <style>
    .wrapper {
      display: flex;
    }
    .left {
      flex: 0 0 25%;
      width: 25%;
      height: 500px;
      background: #333;
      color: #ccc;
    }
    .right {
      flex: 1;
      height: 500px;
      background: #ddd;
    }
  </style>
</head>
<body class="wrapper">
  <div class="left">
    flex子元素：固定宽度，可用百分比
  </div>
  <div class="right">
    flex子元素：宽度不定，但是flex:1,否则它是随内容而撑开。
  </div>
</body>
</html>

效果如下：

 

 

参考文章：两列布局——左侧宽度固定，右侧宽度自适应的两种方法

 

posted on 2019-02-14 16:33  独自去流浪  阅读(3842)  评论(0)  编辑  收藏  举报