7种CSS左侧固定，右侧自适应布局

最新推荐文章于 2024-04-06 00:15:21 发布

小菜菜xx

最新推荐文章于 2024-04-06 00:15:21 发布

阅读量174

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/mccgodlov/article/details/115914198

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

7种CSS左侧固定，右侧自适应布局

效果预览

在这里插入图片描述

7中常见实现方式

flex

.item-1 {
  display: flex;
}
.item-1 .left {
  width: 200px;
}
.item-1 .right {
  flex: 1;
}

.item-2 {
  display: flex;
}
.item-2 .left {
  flex-basis: 200px;
}
.item-2 .right {
  flex-grow: 1;
}

calc属性

.item-3 .left {
  float: left;
  width: 200px;
  height: 100%;
}
.item-3 .right {
  float: right;
  width: calc(100% - 200px);
  height: 100%;
}

display table

.item-4 {
  display: table;
  width: 100%;
}
.item-4 .left {
  display: table-cell;
  width: 200px;
}
.item-4 .right {
  display: table-cell;
}

grid布局

.item-5 {
  display: grid;
  grid-template-columns: 200px auto;
}

position

.item-6 {
  position: relative;
  overflow: hidden;
}
.item-6 .left {
  position: absolute;
  width: 200px;
  height: 100%;
}
.item-6 .right {
  margin-left: 200px;
  height: 100%;
}

float

.item-7 .left {
  float: left;
  width: 200px;
  height: 100%;
}
.item-7 .right {
  margin-left: 200px;
  height: 100%;
}
.item-7:after{
  content: '';
  height: 0;
  line-height: 0;
  display: block;
  visibility: hidden;
  clear: both;
}

float + bfc

.item-8 .left {
  float: left;
  width: 200px;
  height: 100%;
}
.item-8 .right {
  overflow: hidden;
  height: 100%;
}
.item-8:after {
  content: '';
  height: 0;
  line-height: 0;
  display: block;
  visibility: hidden;
  clear: both;
}

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>左侧固定，右侧自适应布局</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .item {
    height: 100px;
  }
  .left {
    background-color: aqua;
  }
  .right {
    background-color: antiquewhite;
  }
</style>
<style>
  .item-1 {
    display: flex;
  }
  .item-1 .left {
    width: 200px;
  }
  .item-1 .right {
    flex: 1;
  }
</style>
<style>
  .item-2 {
    display: flex;
  }
  .item-2 .left {
    flex-basis: 200px;
  }
  .item-2 .right {
    flex-grow: 1;
  }
</style>
<style>
  .item-3 .left {
    float: left;
    width: 200px;
    height: 100%;
  }
  .item-3 .right {
    float: right;
    width: calc(100% - 200px);
    height: 100%;
  }
</style>
<style>
  .item-4 {
    display: table;
    width: 100%;
  }
  .item-4 .left {
    display: table-cell;
    width: 200px;
  }
  .item-4 .right {
    display: table-cell;
  }
</style>
<style>
  .item-5 {
    display: grid;
    grid-template-columns: 200px auto;
  }
</style>
<style>
  .item-6 {
    position: relative;
    overflow: hidden;
  }
  .item-6 .left {
    position: absolute;
    width: 200px;
    height: 100%;
  }
  .item-6 .right {
    margin-left: 200px;
    height: 100%;
  }
</style>
<style>
  .item-7 .left {
    float: left;
    width: 200px;
    height: 100%;
  }
  .item-7 .right {
    margin-left: 200px;
    height: 100%;
  }
  .item-7:after{
    content: '';
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both;
  }
</style>
<style>
  .item-8 .left {
    float: left;
    width: 200px;
    height: 100%;
  }
  .item-8 .right {
    overflow: hidden;
    height: 100%;
  }
  .item-8:after {
    content: '';
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both;
  }
</style>
<body>
  <div class='container'>
    <h2>flex布局</h2>
    <div class='item item-1'>
      <div class='left'>left</div>
      <div class='right'>right</div>
    </div>
    <h2>flex布局</h2>
    <div class='item item-2'>
      <div class='left'>left</div>
      <div class='right'>right</div>
    </div>
    <h2>计算属性calc</h2>
    <div class='item item-3'>
      <div class='left'>left</div>
      <div class='right'>right</div>
    </div>
    <h2>display table</h2>
    <div class='item item-4'>
      <div class='left'>left</div>
      <div class='right'>right</div>
    </div>
    <h2>grid布局</h2>
    <div class='item item-5'>
      <div class='left'>left</div>
      <div class='right'>right</div>
    </div>
    <h2>position</h2>
    <div class='item item-6'>
      <div class='left'>left</div>
      <div class='right'>right</div>
    </div>
    <h2>float</h2>
    <div class='item item-7'>
      <div class='left'>left</div>
      <div class='right'>right</div>
    </div>
    <h2>float + bfc</h2>
    <div class='item item-8'>
      <div class='left'>left</div>
      <div class='right'>right</div>
    </div>
  </div>
</body>
</html>

参考资料

github查看更多文章

小菜菜xx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
7种CSS左侧固定，右侧自适应布局

7种CSS左侧固定，右侧自适应布局效果预览7中常见实现方式flex.item-1 { display: flex;}.item-1 .left { width: 200px;}.item-1 .right { flex: 1;}.item-2 { display: flex;}.item-2 .left { flex-basis: 200px;}.item-2 .right { flex-grow: 1;}calc属性.item-3 .left
复制链接

扫一扫

专栏目录