Question

我尝试调整此post及其alistapart链接。但是，我无法将我的三个块放在一个容器中以响应并保持其宽高比

<div class="hpGridTopRow">
  <span class="hpBox lightBlue one">
    <p class="hbBoxesp">New to Restore</p>
  </span>
  <span class="hpBox green two">
    <p class="hbBoxesp">Events</p>
  </span>
  <span class="hpBox midBlue three">
    <p class="hbBoxesp">Talks</p>
  </span>
</div>

我需要他们自己安排到hpGridTopRow div的边界，所以我使用flex - 并且它运行良好。

但是，布局必须具有响应性 - 容器的纵横比需要随着宽度的变化而保持固定。

这里是css

.hpGridTopRow, 
.hpGridBottomRow {
display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    position: relative;
    padding-bottom: 20%;
    height: 0;
    overflow:hidden;
    background:yellow;
}
.hpBox {    
    width:24.18803418803419%;
    text-align:center;
    height:264px;
    height:100%;
}

.hpBox.one {
    width:49.4017094017094%;
}

.lightBlue {
    background:#15b2d2;
}
.green {
    background:#8cc63f;
}
.midBlue {
    background:#6a8aa8;
}    
.hbBoxesp {
    color:#fff;
    margin-top:40px;
}

我创建了一个jsfiddle - 正如您可以显示容器背景，但不是实际的框，并且所述容器的响应行为。

如何让跨度表现正常？

Answer 1

我删除了这些额外的颜色并简化了百分比以简化代码。

我的想法是，我已将position: relative;添加到父级，position: absolute;添加到子级。这可以确保子女的职位与父母一致。

我还向孩子们添加了top: 0; bottom: 0;，让孩子们span跨越身高div。

然后，您必须使用left和right定位将范围放在正确的位置。

＆＃13;

.hpGridTopRow {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  position: relative;
  padding-bottom: 20%;
  height: 0;
  overflow: hidden;
  background: yellow;
  position: relative;
}
.hpBox {
  width: 25%;
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
}
.hpBox.one {
  width: 50%;
}
.hpBox.two {
  left: 50%;
}
.hpBox.three {
  right: 0;
}
.lightBlue {
  background: #15b2d2;
}
.green {
  background: #8cc63f;
}
.midBlue {
  background: #6a8aa8;
}
.hbBoxesp {
  color: #fff;
  margin-top: 40px;
}

＆＃13;

<div class="hpGridTopRow">
  <span class="hpBox lightBlue one">
    <p class="hbBoxesp">New to Restore</p>
  </span>

  <span class="hpBox green two">
    <p class="hbBoxesp">Events</p>
  </span>

  <span class="hpBox midBlue three">
    <p class="hbBoxesp">Talks</p>
  </span>
</div>

＆＃13;

保持div的深度响应

1 个答案: