How can I reorder my divs using only CSS?

后端 未结 24 1166
傲寒
傲寒 2020-11-22 01:53

Given a template where the HTML cannot be modified because of other requirements, how is it possible to display (rearrange) a div above another div

24条回答
  •  悲&欢浪女
    2020-11-22 02:13

    Negative top margins can achieve this effect, but they would need to be customized for each page. For instance, this markup...

    Greatest Product Ever

    This paragraph appears in the source code directly after the heading and will appear in the search results.

    Note: This information appears in HTML after the product description appearing below.

    ...and this CSS...

    .product { width: 400px; }
    .desc { margin-top: 5em; }
    .sidenote { margin-top: -7em; }
    

    ...would allow you to pull the second paragraph above the first.

    Of course, you'll have to manually tweak your CSS for different description lengths so that the intro paragraph jumps up the appropriate amount, but if you have limited control over the other parts and full control over markup and CSS then this might be an option.

提交回复
热议问题