实现左侧固定宽度, 右侧自适应的两栏布局的八种方案

HTML

<!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>Static Template</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div id="box">
      <div id="left"></div>
      <div id="right"></div>
    </div>
    <div id="box2"></div>
  </body>
</html>

方案一：左侧固定宽度，右侧flex自适应

#box {
  width: 100%;
  height: 400px;
  display: flex;
}
#left {
  width: 100px;
  height: 100%;
  background-color: lightgreen;
}
#right {
  flex: 1;
  background-color: lightblue;
}

#box2 {
  width: 500px;
  height: 500px;
  background-color: plum;
}

方案二：左侧浮动，右侧设置宽度100%，占据左侧普通流位置

#box {
  width: 100%;
  height: 400px;
  background-color: #aaaaaa;
}
#left {
  width: 100px;
  height: 100%;
  float: left;
  background-color: lightgreen;
}
#right {
  width: 100%;
  height: 100%;
  background-color: lightblue;
}

#box2 {
  width: 500px;
  height: 500px;
  background-color: plum;
}

方案三：左侧固定宽度左浮动，右侧设margin-left等于左侧宽度

#box {
  width: 100%;
  height: 400px;
  background-color: #aaaaaa;
}
#left {
  width: 100px;
  height: 100%;
  background-color: lightgreen;
  float: left;
}
#right {
  width: calc(100% - 100px);
  margin-left: 100px;
  height: 100%;
  background-color: lightblue;
}

#box2 {
  width: 500px;
  height: 500px;
  background-color: plum;
}

方案四：左侧固定宽度、固定定位，右侧宽度100%

#box {
  width: 100%;
  height: 400px;
  background-color: #aaaaaa;
  position: relative;
}
#left {
  width: 100px;
  height: 100%;
  background-color: lightgreen;
  position: absolute;
  top: 0;
  left: 0;
}
#right {
  width: 100%;
  height: 100%;
  background-color: lightblue;
}

#box2 {
  width: 500px;
  height: 500px;
  background-color: plum;
}

方案五：左侧宽度固定、固定定位，右侧左边距等于左侧宽度：

#box {
  width: 100%;
  height: 400px;
  background-color: #aaaaaa;
  position: relative;
}
#left {
  width: 100px;
  height: 100%;
  background-color: lightgreen;
  position: absolute;
  top: 0;
  left: 0;
}
#right {
  width: calc(100% - 100px);
  margin-left: 100px;
  height: 100%;
  background-color: lightblue;
}

#box2 {
  width: 500px;
  height: 500px;
  background-color: plum;
}

方案六：双左浮动，右侧计算属性计算宽度

#box {
  width: 100%;
  height: 400px;
  background-color: #aaaaaa;
}
#left {
  width: 100px;
  height: 100%;
  background-color: lightgreen;
  float: left;
}
#right {
  width: calc(100% - 100px);
  height: 100%;
  float: left;
  background-color: lightblue;
}

#box2 {
  width: 500px;
  height: 500px;
  background-color: plum;
}

方案七：左侧左浮，右侧右浮动，右侧计算宽度：

#box {
  width: 100%;
  height: 400px;
  background-color: #aaaaaa;
}
/* #box::after {
  content: " ";
  display: block;
  clear: both;
} */
#left {
  width: 100px;
  height: 100%;
  background-color: lightgreen;
  float: left;
}
#right {
  width: calc(100% - 100px);
  float: right;
  height: 100%;
  background-color: lightblue;
}

#box2 {
  width: 500px;
  height: 500px;
  background-color: plum;
}

方案八：左侧固定宽度，display:inline-block，右侧右浮动，计算宽度

#box {
  width: 100%;
  height: 400px;
  background-color: #aaaaaa;
}
/* #box::after {
  content: " ";
  display: block;
  clear: both;
} */
#left {
  width: 100px;
  height: 100%;
  background-color: lightgreen;
  display: inline-block;
}
#right {
  width: calc(100% - 100px);
  float: right;
  height: 100%;
  background-color: lightblue;
}

#box2 {
  width: 500px;
  height: 500px;
  background-color: plum;
}
版权声明：本文为qq_32925031原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。