Question

我对CSS不是很了解，所以我在这里发布我的问题希望找到解决方案：

我需要的是：我需要一个显示日期的HTML行/ div /行，并在日期之后显示一个条，它将是剩余屏幕宽度的百分比。

像这样：

2015-11-17 ---------------------(50%)
2015-11-18 ------------------------------------------- (80%)
2015-11-19 ==================================================== (100%)

如果你愿意，请在破折号中考虑一个合适的条（例如10px高度）。你可能会注意到50％和80％有----而100％有====。

这是因为对于小于100的任何百分比，我希望该条形为混合颜色，如蓝色和白色组合。对于100％，它将是一个纯蓝色条。

我试图仅使用HTML / CSS来实现这一点，但我发现我的专业知识缺乏。

到目前为止，我有以下HTML / CSS：

<div style="padding-top: 10px;padding-bottom:10px; width:100%">
  <div style='float:left'><strong>Date </strong>{{Today.date}}</div>
  <div style='float:left;background-color:red;width:100%'></div>
</div>

上面的代码甚至没有显示红色背景的第二个div：（

非常感谢帮助我解决这个问题的任何指示！

Answer 1

根据您的浏览器支持要求，Flexbox可以提供帮助。

.wrap {
  width: 80%;
  margin: 1rem auto;
  font-size: 24px;
  display: flex;
  align-items: center;
  border: 1px solid grey;
}
.date {
  padding: 0 1em;
}
.bar {
  height: 10px;
  background: #f00;
}
.bar-50 {
  flex: .5;
}
.bar-80 {
  flex: .8;
}
.bar-100 {
  flex: 1;
}

<div class="wrap">
  <div class="date">2015-11-17</div>
  <div class="bar bar-50"></div>
</div>

<div class="wrap">
  <div class="date">2015-11-18</div>
  <div class="bar bar-80"></div>

</div>

<div class="wrap">
  <div class="date">2015-11-19</div>
  <div class="bar bar-100"></div>
</div>

带有伪元素的

Sneaky 版本，而不是额外的HTML

.bar {
  width: 80%;
  margin: 1rem auto;
  font-size: 24px;
  display: flex;
  align-items: center;
  border: 1px solid grey;
}
.date {
  padding: 0 1em;
}
.bar::after {
  content: '';
  height: 10px;
  background: #f00;
}
.bar-50:after {
  flex: .5;
}
.bar-80:after {
  flex: .8;
}
.bar-100:after {
  flex: 1;
}

<div class="bar bar-50">
  <div class="date">2015-11-17</div>
</div>

<div class="bar bar-80">
  <div class="date">2015-11-18</div>
</div>

<div class="bar bar-100">
  <div class="date">2015-11-19</div>
</div>

也许在语义上，使用progress元素和标签。

Progess Element @ MDN

div {
  margin: 10px;
}

<div>
  <label for="alpha">2015-11-17</label>
  <progress id="alpha" value="50" max="100">50 %</progress>
</div>
<div>
  <label for="beta">2015-11-18</label>
  <progress id="beta" value="70" max="100">70 %</progress>
</div>

<div>
  <label for="gamma">2015-11-19</label>
  <progress id="gamma" value="100" max="100">70 %</progress>
</div>

Answer 2

你可以试试这个

<div style="padding-top: 10px;padding-bottom:10px; width:100%;position: relative;">
  <div style="float: left;width: 50%;display: inline-block;"><strong>Date </strong>{{Today.date}}</div>
  <div style="float:left;width: 50%;height: 10px;display: inline-block;">
 <div class="progress" style="background-color:red;width: 100%;height: 100%;">
</div></div>
</div>

显示具有百分比宽度和不同模式的浮动div

2 个答案: