圣杯布局

html 布局

<div class="container">
  <div class="item center-box">center</div>
  <div class="item left-box">left</div>
  <div class="item right-box">right</div>
</div>
html

css 样式

body {
  --w100: 100px;
}
.container {
  position: relative;
  height: 200px;
  padding: 0 var(--w100);
}
.container .item {
  height: 100%;
  float: left;
  color: #fff;
  font-weight: 600;
  font-size: 20px;
}
.container .center-box {
  width: 100%;
  background-color: blue;
}
.container .left-box {
  width: var(--w100);
  background-color: pink;
  margin-left: -100%;
  position: relative;
  left: calc(0px - var(--w100));
}
.container .right-box {
  width: var(--w100);
  background-color: blueviolet;
  margin-right: calc(0px - var(--w100));
}
css

效果预览