我已经通过stackoverflow搜索,我似乎无法得到我需要的答案.
这张照片应该解释一下：
这也应该有帮助：
<?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 sWHERE 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>解决方法 一个CSS解决方案 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;} 这通过翻转整个ul,然后每个li在它的Y轴上起作用.
总结以上是内存溢出为你收集整理的html – 顶层元素排列全部内容，希望文章能够帮你解决html – 顶层元素排列所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）