Can you change the vertical order of Divs by CSS?

Asked

Viewed 8,294 times

4

I have the following automatically generated page layout:

inserir a descrição da imagem aqui

I’d like to bring to Source, next to the Date (below). But I cannot change the layout of the generated elements. I can only change a template with the external HTML elements, a div out of all that content, CSS. This page will be emailed as a Newsletter, then I believe that Javascript would not be a good idea.

You can only do this with CSS?

see on Jsfiddle

html css

  • Andre, this is what you want? http://jsfiddle.net/e54eZ/1/ It might work, but it’ll be hard to make sure everything stays "where you want it"

  • @Sergio thank you so much for the light. I had the idea to stir by position:absolute and that is: http://jsfiddle.net/andretf/e54eZ/! You may post as an answer so that I can answer the question as resolved?

  • @Sergio Correcting link of previous comment: http://jsfiddle.net/andretf/e54eZ/3/

2 answers

11


If you don’t have problems with old browsers, you can use Flexbox.

Assuming you have a parent element of these three other blocks, it would look like this:

.elemento-pai {
  display: flex;
  flex-direction: column;
}

.d2 {
  order: 3;
}

.d3 {
  order: 2;
}

This way changing the position elements and preserving their dynamics (one keeps pushing the other down, etc).

Example: FIDDLE

  • Great example. CSS is becoming a Swiss army knife.

  • 1

    Good answer, but css still doesn’t work in all browsers (IE8, IE9..).

  • @Andrefigueiredo is, is a relatively new Feature (CSS3), so I highlighted in the first sentence that should only be used if old browsers are no problem.

  • 1

    I updated to have this answer as accepted, since today in 2016 it is widely accepted by current browsers.

5

You can force the elements to position themselves wherever you want. If you take this path the best is that all elements are positioned, and have control over their dimensions so that they do not cross over each other.

Here is a suggestion: http://jsfiddle.net/e54eZ/1/

.d1, .d3 {
    color: #cc9900;
    font-family: Arial;
    font-size: 11px;
    position: absolute; # para os poder mover livremente

}
.d2 {
    margin-top: 20px; # para deixar espaço para os outros elementos
    font-family: "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
}
/* PArte nova */
.d3 {
    top: 5px;
    left: 120px;
}
.d1 {
    top: 5px;
    left: 7px;
}

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.