如何使 div 大小取决于周围的 div答案

【问题标题】：How to make div size depend on surrounding divs如何使 div 大小取决于周围的 div
【发布时间】：2017-04-25 02:09:34
【问题描述】：

嗨，有谁知道如何根据周围的 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>

对不起，这有点含糊。谢谢，哈米什。

【问题讨论】：

你能检查你的代码吗？甚至无法获得第一张图片
轻松使用 CSS3 flexbox：Make div fill remaining horizontal space in flexbox

标签： html css

【解决方案1】：

只是另一种布局方式。我对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>

【讨论】：

【解决方案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>

移除浮动并使用 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;
}

【讨论】：