divの深さを保ち続ける

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要素の境界に自分自身を配置する必要がある - とはうまく機能します。

しかし、レイアウトは応答性がなければなりません。コンテナのアスペクト比は、幅が変わると固定されている必要があります。

は、ここで私はjsfiddleを作成した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; 
} 

だ - コンテナが応答動作していると述べたとすることができますコンテナの背景ショーではなく、実際のボックスとして。

スパンを正しく動作させるにはどうすればよいですか？

Answer 1

私はこれらの余分な色を削除し、コードを単純化するためにパーセントを単純化しました。

私はposition: relative;を親に追加し、position: absolute;を子供に追加しました。これにより、子の位置が親に限定されます。

子どもにtop: 0; bottom: 0;を追加して、子どもをspanにすると、親としてdivの高さになります。

次に、leftとrightの位置を使用して、適切な場所にスパンを配置する必要があります。

.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; 
 
}

<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>