CODEWITHSUNDEEP
javascripthtmlcss
user9836106
user9836106

Reputation: 105

How to start text from bottom to Top?

How to start the text from bottom to Top?

I Need:

see image here

I tried:

.rotated {
  writing-mode: tb-rl;
  transform: rotateZ(-270deg);
}
<div class="rotated">
  <span>5000</span><br>
  <span>3000</span><br>
  <span>2000</span><br>
  <span>1000</span>
</div>

Using <br /> it can be solved easily, but it will be of no used when the screen is small and <div> is position: fixed;.

Upvotes: 3

Views: 836

Answers (2)

xxxmatko
xxxmatko

Reputation: 4142

Just change the order of adding items and use flex like this:

.rotated {
  display: flex;
  height: 300px;
  flex-direction: column-reverse;
}
<div class="rotated">
  <span>1000</span>
  <span>2000</span>
  <span>3000</span>
  <span>5000</span>
</div>

Upvotes: 1

IiroP
IiroP

Reputation: 1102

You can use flexbox (display: flex) with align-items: flex-start and justify-content: flex-end.

.rotated {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-direction: column;
  
  /* For demo */
  border: 1px solid black;
  height: 200px;
  width: 200px;
}
<div class="rotated">
  <span>5000</span><br>
  <span>3000</span><br>
  <span>2000</span><br>
  <span>1000</span>
</div>

Upvotes: 0

Related Questions