Html 将多个div元素相互对齐，同时保持响应性

我试图使以下

div

元素更具响应性：

现在，在小屏幕上观看时，梯形与图像重叠。 我如何才能得到它，使梯形弹出的图片下，坐在那里？这就是我想要的样子：

基本上，我希望梯形在橙色条下居中

这是我的CSS

#home-feature5 {
    height:618px;
    width:1210px;
    position:relative;
    max-width: 100%;
}
.photo {
    bottom: 37px;
    position: absolute;
    z-index: 1;
    left: 20px;
    max-width: 100%;
}
.photo img {
    max-width:100%;
    height:auto;
}
.bg {
    background-color:#f88b5c;
    width:100%;
    height:95px;
    bottom:0;
    left:0;
    position:absolute;
}

  .trap5 { 
    width: 450px;
    height: 200px;
    position: absolute;
    text-transform:uppercase;
    text-align:center;
    bottom:5%;
    z-index:4; 
    right:5%;
}
.trap5:before {
    content: "";
    position: absolute;
    border-radius: 2px;
    box-shadow:0 1px 0px 5px #1c628f;

    top: -4%; bottom: -11%; left: -3%; right: -3%;
    z-index: ;

    -webkit-transform: perspective(50em) rotateX(-30deg);
    transform: perspective(50em) rotateX(-30deg);
}
  .trap5header {
    font-family:"AmericanTypewriterStd", sans-serif; 
    color:#1c628f; 
    font-size:18pt; 
    text-align:center;
    text-transform:uppercase;
    font-weight:600;

  }

  .trap5text {
    font-family:"Scout", sans-serif; 
    font-size:10pt; 
    text-transform:uppercase;
    text-align:center;
    letter-spacing: 1px;
  }

@media screen and (max-width: 480px) {
.trap5 { 
        position:relative;
    }

}

---

基本上，去掉所有绝对定位元素。我是说全部。如果你想让它反应灵敏，那么就用百分比来考虑，而不是固定大小

因此，您的CSS将如下所示：

#home-feature5 {
    height:auto;
    width:auto;
    position:relative;
    max-width: 100%;
    text-align:center;
}
.photo {
    top: 0px;
    position:relative;
    z-index: 1;
    left: 0px;
    width: 100%;
}
.photo img {
    max-width:100%;
    height:auto;
}
.bg {
    background-color:#f88b5c;
    width:100%;
    height:95px;
    bottom:0;
    left:0;
    position:relative;
}
.trap5 {
    width: 450px;
    height: 200px;
    position:relative;
    text-transform:uppercase;
    text-align:center;
    top:5%;
    z-index:4;
    margin:10px auto 30px;
}
.trap5:before {
    content:"";
    position: absolute;
    border-radius: 2px;
    box-shadow:0 1px 0px 5px #1c628f;
    top: -4%;
    bottom: -11%;
    left: -3%;
    right: -3%;
    z-index:;
    -webkit-transform: perspective(50em) rotateX(-30deg);
    transform: perspective(50em) rotateX(-30deg);
}
.trap5header {
    font-family:"AmericanTypewriterStd", sans-serif;
    color:#1c628f;
    font-size:18pt;
    text-align:center;
    text-transform:uppercase;
    font-weight:600;
}
.trap5text {
    font-family:"Scout", sans-serif;
    font-size:10pt;
    text-transform:uppercase;
    text-align:center;
    letter-spacing: 1px;
}
@media screen and (max-width: 480px) {
    .trap5 {
        position:relative;
    }
}

编辑：只是针对完全响应行为的一个小补丁

.trap5{ 宽度：50%； 高度：自动； 最大宽度：450像素； 最大高度：200px； 位置：相对位置； 文本转换：大写； 文本对齐：居中； 最高：5%； z指数：4； 利润率：10px自动30px； }

不客气：）只是一个评论：我提到不要使用固定尺寸和。。。我留下了一些固定尺寸的（我的坏）。请参见编辑，了解您可以在那里执行的操作

of course width:50% could be changed to anything, it's just an example, the important part is it won't be wider than 450px width