Css 如何强制<；李>；积木到底
我正在尝试使用html/css设计教室座位安排，而数据将通过mysql/php提供。如果你是老师，站在全班的前面，你对教室的看法将是学生们将首先坐在前排，在你看来，他们在底部，而其余的空座位在你的顶视图上 想象一下，它是这样的： 设X=一个座位，由一个70px X 70px列表表示，该列表被格式化为一个块 其中有8列和5行 a。这就是html/css通常的工作方式 第三排 第二行 X第一行 黑板 b。这就是我想要的样子 第三排 第二行 X前排座椅 黑板 不管来自php/mysql的数据是什么，我都在寻找一种方法，使HTML/CSS甚至jQuery能够强制第一个块首先进入底部。多谢各位 我的代码：Css 如何强制<；李>；积木到底,css,html,html-lists,Css,Html,Html Lists,我正在尝试使用html/css设计教室座位安排，而数据将通过mysql/php提供。如果你是老师，站在全班的前面，你对教室的看法将是学生们将首先坐在前排，在你看来，他们在底部，而其余的空座位在你的顶视图上 想象一下，它是这样的： 设X=一个座位，由一个70px X 70px列表表示，该列表被格式化为一个块 其中有8列和5行 a。这就是html/css通常的工作方式 第三排 第二行 X第一行 黑板 b。这就是我想要的样子 第三排 第二行 X前排座椅 黑板 不管来自php/mysql的数据是什么，我
<?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>
jQuery动态拖放
身体{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：16px；
边缘顶部：10px；
}
保险商实验室{
保证金：0；
}
#内容包装{
宽度：800px；
保证金：0自动；
高度：500px；
溢出：隐藏；
背景色：#FFFFFF；
边框：实心2px#eeee；
}
#contentTop{
宽度：600px；
填充：10px；
左边距：30px；
}
#可排序{列表样式类型：无；边距：0；填充：0；}
#可排序页边距：20px 20px 1px 20px；
填充：1px；
浮动：左；
宽度：70px；
高度：70像素；
字体大小：12px；
文本对齐：居中；
背景色：#cfcfcf；
立场：绝对；
底部：0；
显示：内联块；
浮动：对；
}
#内容权{
浮动：对；
宽度：300px；
边缘顶部：100px；
填充：10px；
背景色：#336600；
颜色：#FFFFFF；
}
#拯救
{
宽度：100px；
高度：30px；
右边距：自动；
左边距：自动；
背景色：#336600；
颜色：#FFFFFF；
文本对齐：居中；
}
.on{背景色：#000000；颜色：#782322；}
#标题{
背景色：#EEEEEE；
字体大小：粗体；
宽度：804px；
左边距：自动；
右边距：自动；
填充：2；
}
//$（文档）.ready（函数（）{
$（函数（）{
$（文档）.bind（'touchmove'，函数（e）{
e、 预防默认值（）；
}，假）；
$（“#可排序”）.sortable（{opacity:0.6，光标：'move'，update:function（）{
var order=$（this）.sortable（“序列化”）+'&action=updateRecordsListings'；
$.post（“updateDB.php”），顺序，函数（响应）{
});
}
}).addTouch（）；
$（“#可排序”）.disableSelection（）；
//$（“li”）。单击（函数（）{
//$（此）.addClass（“on”）；
//});
});
//});
用PHP对其进行预处理
$seats = array('X', 'X', 'X',...);
$ordered_seats = array(array_splice($seats, 0 - (count($seats) % 8))); // puts the last row into the new array
while (count($seats) > 0)
{
$ordered_seats = array(array_splice($seats, -8)); // take 8 seats at a time
}
在jQuery中重写这一点非常容易，方法是使用.remove（）
从DOM中取出最后一行，将它们放入数组中进行安全保存，然后.appendTo（）
在订购后重新插入它们
jQuery（未测试）：
var seats=$（'#sortable.block'）；
var ordered_seats=seats.拼接（0-（seats.length%8））.pad（8'，）| |[]；
同时（座椅长度>0）
{
$.merge（有序座位，座位拼接（-8））；
}
//您现在有了顺序正确的s
$（'#可排序'）.html（''）；//将容器填空
用于（有序座位中的var i）
{
$（“#可排序”）.append（有序座位[i]）；
}
哇，我真的不明白你要去哪里。这个问题不清楚，您应该提供一些代码来澄清。说真的，人们应该如何用这些信息提出解决方案？你能给我们提供示例中的HTML和css吗？这将帮助我们理解你的查询并提供解决方案。对不起，忘记粘贴代码了。它现在就在那里：添加了一些特定于您发布的代码的jQuery代码。感谢您迄今为止的回复。顺便说一句，在你的第二个代码。第一行中的.block是做什么的？jQuery选择器要在id为sortable
的元素中获取类为block
的所有元素，我删除了.block类，因为它实际上什么都不做。li的格式在CSSHmm中的#可排序li下。两件事1。我的代码需要用PHP进行预处理吗？因为我个人认为问题在于图形方面，而不是数据处理。如果是，我是否必须根据我的代码，$row['name']用实际数据替换数组中的X？2.我正在使用jquery的可排序插件，以便可以拖动块。我只是想知道在哪里插入您提供的第二个代码。对不起，我要求太高了，我是这方面的新手d将第一行更改为具有li
而不是.block
然后：），您可以使用PHP或jQuery。只需使用jQ，并将其放在文档末尾，就在
之前的
标记中，可能会更容易
var seats = $('#sortable .block');
var ordered_seats = seats.splice(0 - (seats.length % 8)).pad(8, '') || [];
while (seats.length > 0)
{
$.merge(ordered_seats, seats.splice(-8));
}
// You now have the <li>s in the correct order
$('#sortable').html(''); // blank the container
for (var i in ordered_seats)
{
$('#sortable').append(ordered_seats[i]);
}