Bottom to top <ul> element arrangement

I'm trying to find out how I can force elements to start from the bottom going to the top.

I have searched through stackoverflow and I can't seem to get the answer that i need. This picture should explain it:

This should help too:

<?php require("connectdb.php"); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Dynamic Drag'n Drop</title>
<script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="javascript/jquery.ui.ipad.altfix.js"></script>


<style>
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin-top: 10px;
}

ul {
    margin: 0;
}

#contentWrap {
    width: 800px;
    margin: 0 auto;
    height: 500px;
    overflow: hidden;
    background-color: #FFFFFF;
    border: solid 2px #EEEEEE;
}

#contentTop {
    width: 600px;
    padding: 10px;
    margin-left: 30px;
}

#sortable { list-style-type: none; margin: 0; padding: 0;}

#sortable li { margin: 20px 20px 1px 20px; 
padding: 1px;
 float: left; 
 width: 70px; 
 height: 70px; 
 font-size: 12px;
 text-align: center; 
 background-color:#cfcfcf;
 position: absoute;
 bottom: 0;
 display: inline-block;
 float: right;
 }


#contentRight {
    float: right;
    width: 300px;
    margin-top: 100px;
    padding:10px;
    background-color:#336600;
    color:#FFFFFF;
}

#save
{    
    width: 100px;
    height: 30px;
    margin-right: auto;
    margin-left: auto;
    background-color:#336600;
    color:#FFFFFF;
    text-align: center;
}
.on { background-color:#000000; color:#782322; }

            #header{
                background-color: #EEEEEE;
                font-weight: bold;
                width: 804px;
                margin-left: auto ;
                margin-right: auto ;
                padding: 2;
            }
</style>


<script type="text/javascript">
//$(document).ready(function(){ 



    $(function() {

    $(document).bind('touchmove', function(e) {
        e.preventDefault();
    }, false);  

        $("#sortable").sortable({ opacity: 0.6, cursor: 'move', update: function()     {
            var order = $(this).sortable("serialize") +     '&action=updateRecordsListings'; 
            $.post("updateDB.php", order, function(theResponse){
            });                                                              
        }                                 
        }).addTouch();
        $( "#sortable" ).disableSelection();

        //$("li").click(function(){
            //$(this).addClass("on");
        //});   
    });

//});   
</script>

</head>
<body>
    <?php 
        session_start();
        $teacherID = $_SESSION['teacherID'];
        $classID = $_SESSION['csID'];
        $qryClass = "SELECT * FROM class_schedule WHERE csID = '". $classID ."';";
        $class = mysql_query($qryClass);
        while($row = mysql_fetch_array($class))
        {
            $subjCode = $row['subjCode'];
            $section = $row['section'];
            $semester = $row['semester'];
            $sy = $row['SY'];
            $time = $row['time'];
        }
    ?>
    <div id = "header">
        <?php 
            //echo "What do you want to do, " .$fname . "?<br>";
            echo "Subject: " . $subjCode . " Block: " . $section . " -     Semester:" . $semester . " - SY:" . $sy . " - " . $time;
        ?>
    </div>
    <div id="contentWrap">
            <ul id="sortable">
                <?php
                session_start();
                $query  = "SELECT e.*, CONCAT(s.lname,', ', s.fname) name     FROM enrollment e, student s
WHERE e.studentID = s.studentID AND e.csID = '". $classID ."' ORDER BY sort;";
                $result = mysql_query($query);
                $c = 0;
                while($row = mysql_fetch_array($result, MYSQL_ASSOC))
                {
                    //if($c != 4)
                        echo "<li id='recordsArray_'"     . $row['id'] . ">" . $row['name'] . "</li>";
                }
                ?>
            </ul>       

    </div>
    <div id="save">
        Blackboard
    </div>


</body>
</html>

回答1:

A css solution fiddle

ul, ul li {
-webkit-transform: scaleY(-1);
   -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
     -o-transform: scaleY(-1);
        transform: scaleY(-1);

}
ul {
    width: 350px;
}
 li {
    display: inline-block;
    width: 70px;
    zoom: 1;         
    *display: inline;
}

This works by flipping the entire UL and then each LI on it's Y axis.

回答2:

For Older Browsers (IE7+)

It can still be done, assuming a limited set of objects as the css will get more complex for more rows (though not impossible). For the original six objects in the problem, see this fiddle. For 12 objects in 3 rows see another.

Note: I realize some version of an :nth-child() selector could be used rather than the cumbersome code below, but then it would again not be supported by older browsers (which was my point in adding my answer to this post).

HTML

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
</ul>

CSS

ul {
    width: 210px;
}

li {
    display: block;
    float: left;
    width: 48px;
    height: 48px;
    margin: 0;
    text-align: center;
    border: 1px solid blue;
}

li:first-child,
li:first-child + li,
li:first-child + li + li,
li:first-child + li + li + li {
    margin: 51px 0 -99px 0;
}

回答3:

Can you change $query to the following. That would be the easiest way to do it.

$query  = "SELECT e.*, CONCAT(s.lname,', ', s.fname) name     FROM enrollment e, student s
WHERE e.studentID = s.studentID AND e.csID = '". $classID ."' ORDER BY sort DESC;";