JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="box1">
        <p style="height:50px">
            第一部分高：50px
        </p>
    </div>
    <div id="box2">
        <p  style="height:100px">
            第二部分高：100px
        </p>
    </div>
    <div id="box3">
        <p  style="height:200px">
            第三部分高：200px
        </p>
    </div>
</div>

CSS

body，p{margin:0;padding:0;}
#container{
  width:500px;
  margin:10px auto;
  overflow:hidden;
  position:relative;
}
#box1,#box2,#box3{
  margin-bottom:-200px;
  padding-bottom:200px;
}
#box1{
  float:left;
  background:red;
  width:150px
}
#box2{
  float:left;
  background:#000;
  width:200px
}
#box3{
  float:left;
  background:green;
  width:150px
}
p{
  color:#fff;
  text-align:center;
}