如何實(shí)現(xiàn)如圖所示布局

<style>

  body {
    padding: 0;
    margin: 0;
  }
.box {
  width: 102px;
  height: 102px;
  position: relative;
  box-sizing: border-box;
}
.boxItem{
  height: 100px;
  width: 25px;
  border:1px solid grey;
}
.box > .boxItem:nth-child(1) {
  background: yellow;
  position: absolute;
  left: 0;
}
.box > .boxItem:nth-child(2){
  position: absolute;
  top: -38px;
  left: 38px;
  transform: rotate(-90deg);
  z-index: 4;
  background: red;
}
.box > .boxItem:nth-child(3){
  position: absolute;
  right: 0px;
  top: 0;
  z-index: 3;
  background: pink;
}
.box > .boxItem:nth-child(4){
  position: absolute;
  left: 37px;
  transform: rotate(-90deg);
  z-index: 2;
  top: 38px;
  background: #3c3baa;
}

  
</style>


  <div class="box">
    <div class="boxItem"></div>
    <div class="boxItem"></div>
    <div class="boxItem"></div>
    <div class="boxItem"></div>
  </div>

也可以試試css網(wǎng)格布局，給你一個(gè)鏈接https://segmentfault.com/a/11...

使用js快速生成網(wǎng)格布局，你說(shuō)的這個(gè)布局，幾行代碼就可以生成。

我覺(jué)得最簡(jiǎn)單的方法就是用position:absolute來(lái)做。。
這是一個(gè)很粗糙的方式,不過(guò)用的是浮動(dòng)。。。
style

.wrap{
            width: 300px;
            height: 300px;
        }
        .one{
            width: 50px;
            height: 250px;
            background-color: pink;
            float: left;
        }        
        .two{
            width: 250px;
            height: 50px;
            background-color: red;
            float: left;
        }
        .three{
            width: 200px;
            height: 200px;
            float: left;
            background-color: aqua; 
        }
        .four{
            width: 250px;
            height: 50px;
            float: left;
            background-color: green;
        }
        .five{
            width: 50px;
            height: 250px;
            float: left;
            background-color: blue;
            margin-top: -200px;
        }

html

    <div class="wrap">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
        <div class="five"></div>
    </div>