将八个div放在页面上

Question

所以我有这个HTML和这个CSS。我希望.big元素显示在我的.About的角落里 到目前为止，这是使用此代码

的样子

The output of the code

我希望.left-box .container中的第一个.big .box显示在.left-box .container的顶部，而.right-box .container中的第一个.big .box将显示为显示在.right-box .container的顶部。 div的其余部分应保持原样。

＆＃13;

＆＃13;

.box {
    width: 100%;
    height: 300px;
    position: relative;
    border: 1px solid black;
}

.container {
  display: inline-block;
  width: 33%;
}

.big {
  height: 400px;
}

.arrow {
    border: 1px solid green;
    position: absolute;
    width: 20px;
    height: 20px;
}

img {
  position: absolute;
  width: 100%;
  height: 300px;
}

.top {
  top:0
}

.middle {
  top:50%;
  margin-top:-10px;
}

.bottom {
  bottom:0
}

.left {
  left:0;
}

.center {
  left:50%;
  margin-left:-10px;
}

.right {
  right:0;
}

＆＃13;

<div class="About">
        <div class="left-box container">
            <div class="big box">
                <div class="arrow bottom right"></div>
            </div>

            <div class="big box">
                <div class="arrow top right"></div>
            </div>
        </div>
        <div class="middle-box container">
            <div class="box">
                <div class="arrow bottom center"></div>
            </div>
            <div class="box">
              <img src="images/marks.jpg" alt="marks" />
            </div>
            <div class="box">
                <div class="arrow top center"></div>
            </div>
        </div>
        <div class="right-box container">
            <div class="big box">
                <div class="arrow bottom left"></div>
            </div>

            <div class="big box">
                <div class="arrow top left"></div>
            </div>
         </div>
    </div>

＆＃13;

＆＃13;

＆＃13;