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

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 Templatetitle>
    <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;
}

你可能感兴趣的:(CSS)