如何使div大小取決於周圍divs

嗨沒有人知道如何有一個divs寬度取決於周圍的div。目前，我的問題部分如下這樣：如何使div大小取決於周圍divs

，但我想它看起來像這樣我想它去那裏，無論屏幕尺寸的。目前，它看起來像這樣，如果我縮小我的屏幕：所以有什麼辦法讓它們都留在同一條線上，只是改變進度條的寬度，所以它總是去到下一個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。

來源

2017-04-25 hamish

你能檢查你的代碼嗎？甚至無法獲得第一張圖片 –

使用CSS3 flexbox輕鬆實現：[**使div填充flexbox中剩餘的水平空間**]（http://stackoverflow.com/q/37745051/3597276） –

只是另一種方式，你可以佈局。我對html做了一點編輯。但在CSS中更多的編輯。到目前爲止，您對容器使用了flex，您可以繼續使用它。

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

來源

2017-04-25 02:32:13 blecaf

如果可能的話，你可以嘗試改變你的標記有點用類似的東西：

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

取出花車和使用Flexbox的代替：

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

來源

2017-04-25 02:33:48

如何使div大小取決於周圍divs

回答

相關問題