Question

嗨，有没有人知道如何根据周围的divs得到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>

抱歉这有点模糊。谢谢，哈米什。

Answer 1

您可以采用另一种方式进行布局。我对html进行了一些编辑。但是在CSS中有更多的编辑。到目前为止，你使用flex作为容器，你可以继续使用它。

＆＃13;

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

＆＃13;

System.Collections.Specialized.NameValueCollection

＆＃13;

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>

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

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

2 个答案: