Placing an element on the page starting from the bottom and moving it towards the

Question

Placing an element on the page starting from the bottom and moving it towards the

Is there a way to display items on a page from bottom to top, similar to how messages are shown in a chat? Here's an example:

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  padding: 3px;
  margin: 1px;
  color: white;
  display: inline-block;
  vertical-align: bottom;
}

  <div class="chart">
        <div style="height: 10px; width: 100%; ">
          10</div>
        <div style="height: 15px; width: 100%; ">
            15</div>
        <div style="height: 20px; width: 100%; ">
            20</div>
        <div style="height: 25px; width: 100%; ">
            25</div>
        <div style="height: 30px; width: 100%; ">
            30</div>
   </div>

Is there a way to achieve this effect using CSS?

Thank you for your help.

javascript jquery html css

Answer 1

Answer №1

Utilizing CSS flexbox makes achieving this task incredibly simple. While adding some vendor prefixes may be necessary, it can be accomplished with just two lines of code to the parent .chart element (Don't forget to include width: 100% to the children as well)

CSS:

.chart  { 
  display: flex;
  flex-wrap:wrap-reverse;
}
.chart div {
  width: 100%;
}

This arrangement will display the items in reverse order. You can view a functional example in this fiddle: https://jsfiddle.net/vxtqfqw9/5/

To delve deeper into the remarkable capabilities of flexbox and how to leverage them, check out this article I wrote which includes two valuable resources. :)

Answer 2

Utilizing CSS flexbox makes achieving this task incredibly simple. While adding some vendor prefixes may be necessary, it can be accomplished with just two lines of code to the parent .chart element (Don't forget to include width: 100% to the children as well)

CSS:

.chart  { 
  display: flex;
  flex-wrap:wrap-reverse;
}
.chart div {
  width: 100%;
}

This arrangement will display the items in reverse order. You can view a functional example in this fiddle: https://jsfiddle.net/vxtqfqw9/5/

To delve deeper into the remarkable capabilities of flexbox and how to leverage them, check out this article I wrote which includes two valuable resources. :)

Answer 3

Answer №2

If you want to achieve this using jquery, you can follow the steps outlined below. Begin by selecting all the div elements within the .chart class and converting them into an array. Then, reverse the order of the array and finally, update the contents of the .chart class with the reversed array.

var items = $('.chart div').toArray().reverse();
$('.chart').html(items);

.chart div {
    font: 10px sans-serif;
    background-color: steelblue;
    padding: 3px;
    margin: 1px;
    color: white;
    display: inline-block;
    vertical-align: bottom;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chart">
    <div style="height: 10px; width: 100%; ">
        10
    </div>
    <div style="height: 15px; width: 100%; ">
        15
    </div>
    <div style="height: 20px; width: 100%; ">
        20
    </div>
    <div style="height: 25px; width: 100%; ">
        25
    </div>
    <div style="height: 30px; width: 100%; ">
        30
    </div>
</div>

Answer 4

If you want to achieve this using jquery, you can follow the steps outlined below. Begin by selecting all the div elements within the .chart class and converting them into an array. Then, reverse the order of the array and finally, update the contents of the .chart class with the reversed array.

var items = $('.chart div').toArray().reverse();
$('.chart').html(items);

.chart div {
    font: 10px sans-serif;
    background-color: steelblue;
    padding: 3px;
    margin: 1px;
    color: white;
    display: inline-block;
    vertical-align: bottom;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chart">
    <div style="height: 10px; width: 100%; ">
        10
    </div>
    <div style="height: 15px; width: 100%; ">
        15
    </div>
    <div style="height: 20px; width: 100%; ">
        20
    </div>
    <div style="height: 25px; width: 100%; ">
        25
    </div>
    <div style="height: 30px; width: 100%; ">
        30
    </div>
</div>

Placing an element on the page starting from the bottom and moving it towards the

Answer №1

Answer №2

Similar questions

Text Embedded in Object HTML

Choosing a Specific Column within a CSS Grid

How can I alter the display of table rows and columns using responsive design techniques?

Can a Vue computed property return a promise value?

Adjusting the size of an HTML5 canvas using a class function when a resize event occurs

The Vue.js reactivity system does not detect changes when a property is updated within a WebRTC callback

Issue: Map container not located when implementing a leaflet map with Angular

Restricting the ability to uncheck jQueryCheckboxes

Using Ajax with Angular services

Contrasting bracket notation property access with Pick utility in TypeScript

Tips for ensuring only one dropdown is opened at a time

Utilizing Express JS to keep users on the same page upon submitting a form

Is there a way to modify certain parameters of a plugin without the need to directly edit the

What's the significance of this issue? Fatal error: Inability to utilize function return value in write context

Using multiple foreach loops within each other

Is it possible to import a global package in Node if NODE_PATH is already configured?

The form I created retrieves select options via an ajax call, but after saving, the post values are not displaying as expected

Encountering an issue with resolving the module - Material-UI

Encountering a client-side exception while deploying Next.js with react-google-maps/api on Vercel

Mastering the use of gl Scissor is essential for effectively implementing popups in your