CSS position elements

Question

<div class="oringal">
    <ul class="rank">
<li class="rank-1">
    <img src="http://netdna.webdesignerdepot.com/uploads/packaging_design/Tetra_pak_New_packaging_Juice7_by_KATOK.jpg" />
    <p>1</p>
</li>
<li class="rank-2">
    <img src="http://netdna.webdesignerdepot.com/uploads/packaging_design/21.jpg" />
    <p>2</p>
</li>

I want to get the ranking sequence as follows, but i do not want change the html, how can i just change the css in the div.oringal to get the ranking sequence as follows.first in center, second rights, third lefts

please see the full code on jsfiddle page http://jsfiddle.net/6grsm/1/, thanks a lot

Answer 1

"i want get the sequence 3 1 2, but i do not want to change the sequence in html in div.original, my question is, how should i change the css"

From that comment, it seems that what you actually is not to change the positioning of elements, but change the order of numbering, which is a completely different question. The easiest way to do this is to use the (deprecated, but still seemingly supported) start attribute of the ol tag. In CSS, you can also set counter-increment for li tags, which will enable customisation of what the li tags display. Examples of the various methods are in this Stackoverflow answer

Answer 2

You could try using absolute positioning. It looks like you are creating a shopping cart layout so I assume that you have a fairly structured page to start with.

See demo at fiddle: http://jsfiddle.net/audetwebdesign/rC59T/

Your HTML is basically this:

<div calss="panel-wrap">
<ul  class="rank">
    <li class="rank-1">
        <img ... />
        <p>1</p>
    </li>
    <li class="rank-2">
        <img ... />
        <p>2</p>
    </li>
    <li class="rank-3">
        <img ... />
        <p>3</p>
    </li>
</ul>
</div>

For the CSS:

.panel-wrap {
    width: 460px; 
}

The .panel-wrap is useful if you want to add background images and so on.

ul.rank {
    list-style: none outside none;
    padding: 0;
    margin: 0;
    position: relative; /* this will force the li to be positioned with respect
                           to this block level container */
    border: 1px solid gray;
    height: 200px;
}
ul.rank li {
    width: 150px;
    top: 0;           /* pin top and bottom so that the li fills in the height
                         of the parent container */
    bottom: 0;
    border: 1px solid red;
    position: absolute;
}
ul.rank img {
    width: 150px; 
    xheight: 90px; /* Careful not to adjust both width and height which could
                      distort your images */
}
ul.rank p {
    border: 1px dotted blue;
    text-align:center;
    position: absolute;
    bottom: 10px;
    left: 0;    /* pin left and right so the p fills in the 
                   width of the li... */
    right: 0;
    margin: 0;
}

The trick is to adjust the left offset for each list item in uniformly spaced increments:

.rank-3 {
    top: 0;
    left: 0;
}
.rank-1 {
    top: 0;
    left: 160px;
}
.rank-2 {
    top: 0;
    left: 320px;
}

The Big Advantage

What you could do is set the left offset dynamically using JavaScript/jQuery, and create an interactive page where the user can click buttons and scroll through a series of catalog items.