Question

我正在努力使以下div元素更具响应性： http://jsfiddle.net/7q5eevpt/

现在，当在小屏幕上观看时，梯形与图像重叠。我怎样才能得到它，以便图片下面的梯形弹出并坐在那里？这就是我想要的样子： enter image description here

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

这是我的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;
    }

}

Answer 1

基本上，摆脱所有绝对定位的元素。我的意思是所有。如果您希望它具有响应性，那么请考虑百分比，而不是固定大小。

所以你的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;
    }
}

see fiddle here

编辑：只是对完全响应行为的一个小修复。

.trap5 { 宽度：50％; 高度：自动; 最大宽度：450px; 最大高度：200px; 位置：相对; 文本转换：大写; 文本对齐：中心; 前5％; 的z-index：4; 保证金：10px auto 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

将多个div元素对齐在一起，同时保持响应性

1 个答案: