Question

我正在制作一个聊天脚本，可以最大限度地减少特定的聊天，我似乎无法弄清楚如何使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;
}

当我调用我还没有添加的脚本minim（）时，我希望我的div调用标题向下移动。

Answer 1

您可以使用弹性框来实现此目的

看一下这篇文章：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

这会使div上升而不是下降：

.container {
  flex-direction: column-reverse;
}

Answer 2

在我改变问题后我发现的最简单的方法是获得正确的结果，非常简单

.chatbox
{
 position: fixed;
 bottom: 0px;
}

它是

Answer 3

您可以使用jQuery的.animate()方法将每个聊天div缩放为“最小化”/“最大化”状态。

这是一个不完美的例子，我只是作为一个起点拼凑在一起：

jsFiddle Demo

<强> HTML：

<div class="chatBox" id="chat-17">
    <div class="chatTitle">
        <div class="titleText">This is chat title</div>
        <div class="titleMin"> v</div>
    </div>
    <div class="chatBody">
        Chat message goes here
    </div>
</div>

<强> jQuery的：

$('.titleText').click(function(){
    if ( $(this).hasClass('minTitle') ){
        $(this).removeClass('minTitle');
        $(this).parent().parent().removeClass('minimized');
    }else{
        $(this).addClass('minTitle');
        var cb = $(this).parent().parent();
        cb.addClass('minimized');
        //cb.animate(function(){top: '150',left: '10'},500);
    }
});

<强>的CSS：

.chatBox{width:100%;border:1px solid blue;overflow:hidden;}
.chatTitle{width:100%;height:20px;}
.titleText{width:95%;height:100%;color:white;font-weight:bold;float:left;background:black;}
.titleMin{width:4.5%;height:100%;color:red;font-weight:bold;float:left;text-align:center;background:black;}
.titleMin:hover{cursor:pointer;cursor:hand;}
.chatBody{width:100%;height:150px;padding:10px;background:wheat;}

添加了额外的css，因为示例无效：

.titleText:hover{cursor:pointer;cursor:hand;}
.minimized{height:5px;width:5px;position:absolute;top:150px;}
span{font-weight:bold;color:red;}

资源：

http://api.jquery.com/animate/

http://viralpatel.net/blogs/understanding-jquery-animate-function/

http://www.tutorialscollection.com/jquery-animate-how-to-animate-in-jquery-using-animate-method/

http://www.1stwebdesigner.com/tutorials/jquery-animation-tutorial/

如何让我的html DIVS下推而不是Up

3 个答案: