【发布时间】：2014-09-04 19:13:39
【问题描述】：
我正在制作一个可以最小化特定聊天的聊天脚本，但我似乎无法弄清楚如何使 div 的标题下推！有没有办法做到这一点？？我对此进行了研究，但无法找到获得所需结果的方法。
我的HTML代码如下
<?php
$usrid = "Joel";
?><!DOCTYPE html>
<HTML>
<HEAD>
<LINK REL="stylesheet" HREF="css/style.css">
<SCRIPT SRC="js/jquery-2.1.1.min.js"></SCRIPT>
<SCRIPT>
function onTestChange() {
var key = window.event.keyCode;
// If the user has pressed enter
if (key == 13) {
event.preventDefault();
post();
}
else {
return true;
}
}
function post()
{
document.getElementById('txtArea').value = "";
}
</SCRIPT>
</HEAD>
<BODY><?php
$file = simplexml_load_file("xml/joel.xml");
echo"
<DIV CLASS=\"chatbox\">
<DIV CLASS=\"title\">
<SPAN CLASS=\"name\">
$file->subject
</SPAN>
<SPAN CLASS=\"buttons\">
<BUTTON ONCLICK=\"minimize()\" NAME=\"Minimize\" ID=\"min\">-</BUTTON><BUTTON ONCLICK=\"close()\" NAME=\"Close\">x</BUTTON>
</SPAN>
</DIV>
<DIV ID=\"body\" CLASS=\"hidden\">
<DIV CLASS=\"history\">";
foreach($file->post as $post)
{
if($post->auth == $usrid)
{
echo"
<DIV CLASS=\"self\">
<DIV CLASS=\"self_left\">
$post->content
</DIV>
<DIV CLASS=\"self_right\">
$post->auth
</DIV>
</DIV>
";
}
else
{
echo"
<DIV CLASS=\"other\">
<DIV CLASS=\"other_left\">
$post->auth
</DIV>
<DIV CLASS=\"other_right\">
$post->content
</DIV>
</DIV>
";
}
}
echo" </DIV>
<DIV CLASS=\"input\">
<DIV ID=\"input\">
<DIV CLASS=\"text\">
<TEXTAREA NAME=\"input\" ONKEYPRESS=\"onTestChange()\" ID=\"txtArea\"></TEXTAREA>
</DIV>
<DIV CLASS=\"submit\">
<BUTTON SRC=\"images/button1.png\" ONCLICK=\"post()\">Send</BUTTON>
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
</BODY>
</HTML>";
?>
我的 CSS 是 ::-webkit-滚动条 { 宽度：8px； 高度：8px； }
::-webkit-scrollbar-track
{
background: url(../images/bg.png);
}
::-webkit-scrollbar-thumb
{
background: rgba(0,0,0,0.5);
border-radius: 25px;
}
.chatbox
{
width: 250px;
margin: 0 auto;
border: 1px solid black;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
overflow: hidden;
flex-direction: column;
}
.title
{
width: 100%;
border-bottom: 1px solid black;
display: inline-block;
background: #436ED2;
flex-direction: column;
}
.name
{
width: calc(50% - 10px);
float: left;
text-align: left;
margin-top: 3px;
padding-left: 10px;
}
.buttons
{
width: 50%;
float: right;
text-align: right;
}
.buttons button
{
width: 24px;
height: 24px;
border: none;
background: none;
outline: none;
}
.history
{
width: 90%;
margin: 0 auto;
height: 300px;
border: 1px solid black;
margin-top: 5px;
overflow: auto;
overflow-x: hidden;
}
.self
{
width: 100%;
background: #c6d3f1;
display: inline-block;
margin-top: -4px;
padding-bottom: 5px;
padding-top: 5px;
}
.self_left
{
width: calc(80% - 6px);
float: left;
text-align: right;
padding-right: 5px;
border-right: 1px solid black;
}
.self_right
{
width: calc(20% - 6px);
float: right;
text-align: left;
padding-left: 5px;
border-left: 1px solid black;
}
.other
{
width: 100%;
background: #f1d3c6;
display: inline-block;
margin-top: -4px;
padding-bottom: 5px;
padding-top: 5px;
}
.other_left
{
width: calc(20% - 6px);
float: left;
text-align: right;
padding-right: 5px;
border-right: 1px solid black;
}
.other_right
{
width: calc(80% - 6px);
float: right;
text-align: left;
padding-left: 5px;
border-left: 1px solid black;
}
.input
{
width: 90%;
margin: 0 auto;
height: 90%;
margin-top: 5px;
}
#input
{
width: 100%;
display: inline-block;
}
textarea
{
resize: none;
width: 75%;
height: 40px;
float: left;
}
.input button
{
float: right;
width: 20%;
height: 46px;
top: 10px;
}
.hidden
{
display: none;
flex-direction: column;
}
当我调用我尚未添加的脚本时，我希望名为 title 的 div 向下移动。
【问题讨论】：
-
请告诉我们你目前拥有的东西
-
请发布代码或网站。