1
我正在做一個聊天腳本，以儘量減少特定的聊天，我似乎無法弄清楚如何使div的頭壓下！有沒有辦法做到這一點？？我研究了這一點，但無法找到獲得我想要的結果的方法。如何使我的HTML DIVS按下，而不是向上
我的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的滾動條 { 寬度：8像素; height：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;
}
我希望我的DIV稱爲標題時，我調用腳本最小化（），我還沒有添加下移。
請告訴我們你有什麼到目前爲止 – Devin 2014-09-04 19:15:05
請張貼代碼或網站。 – Brian 2014-09-04 19:15:09