divのサイズを周囲のdivに依存する

Question

こんにちは、周りのdivに応じてdivの幅を持つ方法を知っています。 現在、私の問題のセクションでは、このなります

しかし、私は関係なく、画面サイズのそこに行くためにそれをしたいと思い、私はそれがこの ようになりたいと思います。 現在、画面が縮小されている場合は、次のようになります。 プログレスバーの幅を変更して同じ行に残り、常に次のdivの開始位置に移動する方法はありますか。

#coinsdiv{ 
    border-width: 2%; 
    border-style: black; 
    /*position: absolute;*/ 
float: right; 
width: 70px; 
     height: 70px; 
     -webkit-border-radius: 25px; 
     -moz-border-radius: 25px; 
     border-radius: 75px; 
     border-style: black; 
     background: gold; 
     margin-top: 2%; 
     margin-right: 3%; 
     display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: center; 
    /*clear: left;*/ 
     /*display: inline-block;*/ 

} 
#coinspan{ 
    font-family: Arial; 
    font-size: 20pt; 
    float: center; 
    /*margin-top: auto;*/ 
} 
#aroundcoin{ 
float: right; 
margin-right: 3%; 
margin-top: 2%; 
width: 100%; 

} 
#progressbar { 
    width: 70%; 
    height: 5%; 
    background: red; 
    margin: 1%; 
    float: left; 
} 
#inrect{ 
width: 10%; 
    height: 100%; 
    background-color: blue; 
} 
    #coinDescribe{ 
    float: right; 
    } 

<div id="aroundcoin"> 
    <div id="progressbar"><div id="inrect"></div></div> 
<div id="coinDescribe">Coins Earned:</div> 

<div id="coinsDiv" ><span id="coinspan">ERR</span></div> 
</div> 

申し訳ありませんがこれは少しあいまいです。ありがとう、Hamish。

Answer 1

ちょっと別の方法でレイアウトできます。私はHTMLを少し編集しました。しかし、より多くのCSSの編集。今までコンテナにフレックスを使用していました。

#aroundcoin { 
 
    /* float: right; */ 
 
    margin-right: 3%; 
 
    margin-top: 2%; 
 
    width: 100%; 
 
    display: flex; 
 
} 
 
#progressbar { 
 
    width: 70%; 
 
    height: 5%; 
 
    height: 50px; 
 
    background: red; 
 
    margin: 1%; 
 
    /* float: left; */ 
 
    display: flex; 
 
    flex-grow: 1; 
 
} 
 
#inrect { 
 
    width: 10%; 
 
    height: 100%; 
 
    background-color: blue; 
 
    /* flex-grow: 1; */ 
 
} 
 
.coins-cont { 
 
    flex-grow: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 

 
#coinspan { 
 
    font-family: Arial; 
 
    font-size: 20pt; 
 
    float: center; 
 
    /* margin-top: auto; */ 
 
}

<div id="aroundcoin"> 
 
    <div id="progressbar"><div id="inrect"></div></div> 
 
    <div class="coins-cont"> 
 
<div id="coinDescribe">Coins Earned:</div> 
 

 
<div id="coinsDiv" ><span id="coinspan">ERR</span></div> 
 
</div> 
 
</div>

Answer 2

可能な場合は、少しそのようなもので、あなたのマークアップを変更してみてください：

<div id="aroundcoin"> 
    <div id="progressbar" class="columns"> 
    <div id="inrect"></div> 
    </div> 

    <div id="coinsDiv"> 
    <div id="coinDescribe">Coins Earned:</div> 
    <span id="coinspan">ERR</span> 
    </div> 
</div> 

山車を削除し、代わりにフレキシボックスを使用します。

#coinsdiv{ 
    flex: 0 0 auto; 
    max-width: 100%; 
    border-width: 2%; 
    border-style: black; 
    width: 70px; 
    height: 70px; 
    -webkit-border-radius: 25px; 
    -moz-border-radius: 25px; 
    border-radius: 75px; 
    border-style: black; 
    background: gold; 
    margin-top: 2%; 
    margin-right: 3%; 
    justify-content: center; 
    align-items: center; 
} 
#coinspan{ 
    font-family: Arial; 
    font-size: 20pt; 
} 
#aroundcoin{ 
    display: flex; 
    flex-flow: row wrap; 
    margin-right: 3%; 
    margin-top: 2%; 
    width: 100%; 
} 
#progressbar { 
    flex: 1 1 0px; 
    width: 70%; 
    height: 5%; 
    background: red; 
    margin: 1%; 
} 
#inrect{ 
    width: 10%; 
    height: 100%; 
    background-color: blue; 
} 
#coinDescribe{ 
    // float: right; 
}