我该如何对齐框

Question

我正在尝试对齐3个框和2个图像。

垂直放置2个框，

之间有一个img

第三个框位于它们的右边，箭头img如下所示：

示例框CSS：

.box{
  width: 80px;
  height: 80px;
  background: #8C8C8C;
margin:0 auto;
border: solid 3px #8B0000;


}

Answer 1

使用flexbox并在div div内划分为3个部分（3 wrap s）

.wrap{
display:flex;
}
.box{
  width: 80px;
  height: 80px;
  background: #8C8C8C;
margin:0 auto;
border: solid 3px #8B0000;
}
.img1 img{
  width: 80px;
  height: 150px;
}
.part2 img{
    width: 150px;
  height: 80px;
}
.part2,.part3{
margin-top: 100px;
}
.part3 .box{
    margin-left: 40px;
    }

<div class="wrap">
  <div class="part1">
    <div class="box">

    </div>
      <div class="img1">
         <img src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
     </div>
      <div class="box">

    </div>
  </div>
  <div class="part2">
    <img src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
  </div>
  <div class="part3">
      <div class="box">

    </div>
  </div>
</div>

Answer 2

如果元素数量恒定。 （3个框和2个具有固定宽度和高度的图像），您可以创建具有相对位置的包装盒，然后将绝对位置添加到子节点并写入所需的位置。例如：

.wrapper {
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.child-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Answer 3

您可以使用flexbox按行和列定位框。

#cont1 {
  display:flex;
  flex-direction:row;
}

.box{
  width: 80px;
  height: 80px;
  background: #8C8C8C;
border: solid 3px #8B0000;
}

<div>
<div class="box">Box 2
</div>
<div id="cont1">
<div> IMG1 </div>
<div> IMG2 </div>
<div class="box">Box 3</div>
</div>
<div class="box">
Box 1
</div>
</div>

Answer 4

您应该尝试使用float / clear属性：

.box1{
float: left;
}
.box2{
float: right;
}
.image{
float: left;
}
.box3{
float: left;
}

然后只使用位置：您班级中的相对位置即可确定位置。