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

Question

I am not very good with CSS, so I am posting my problem here hoping for a solution:

What I need is following: I need an HTML row/div/line that shows a date and after the date it shows a bar which will be a percentage of the remaining screen width.

Like so:

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

If you will please consider in the dashes as a proper bar (like 10px height for eg). You might notice that 50% and 80% have ---- while 100% has ==== .

This is because for any percentage less than 100 I want the bar to be a mixed color like blue and white combo. For the 100% it will be a solid blue color bar.

I am trying to achieve this using HTML/CSS only, but I find my expertise to be lacking.

So far, I have following 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>

The above code does not even show the second div with red background :(

Any pointers in helping me solve this is very much appreciated!

Answer 1

Flexbox could help here depending on your browser support requirements.

 .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 version with pseudo-element instead of extra 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> 

Perhaps more semantically, use a progress element and a label.

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

You can try this

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