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

Question

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

我正在制作一个聊天脚本,可以最小化特定的聊天,我似乎无法弄清楚如何使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>";

?>

Run Code Online (Sandbox Code Playgroud)

我的css是:: - webkit-scrollbar {width: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;
}

Run Code Online (Sandbox Code Playgroud)

当我调用我还没有添加的脚本minimize()时,我希望我的div调用title向下移动.

Answer 1

Car*_*lla 5

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

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

这将使div上升而不是下降:

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，2 月前
查看次数：	1248 次
最近记录：	11 年，2 月前