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:

explanation image

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>

标签： html css positioning html-lists

3条回答

倾城　Initia

2楼-- · 2019-04-04 11:05

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;";

0人赞添加讨论(0) 举报

小情绪 Triste *

3楼-- · 2019-04-04 11:08

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;
}

0人赞添加讨论(0) 举报

啃猪蹄的小仙女

4楼-- · 2019-04-04 11:12

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.

0人赞添加讨论(0) 举报

Bottom to top element arrangement

For Older Browsers (IE7+)

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间

Bottom to top
element arrangement