1

这是css/html

<!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" />
<style>
#chatContainer {
    position: fixed;
    bottom: 20px;
    right: 0;
    vertical-align: bottom;
}
.chat {
    border: 1px solid #999;
    float: right;
    margin: 0 5px;
    height: 200px;
    width: 250px;
    vertical-align: bottom;
    overflow: hidden;
    bottom: 0px;
    transition: 1s;
}
.title {
    padding: 0.5em;
    background-color: blue;
    color: white;
}
.text {
    padding: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 120px;
}
.inputText {
    width: 100%
}
</style>
</head>

<body>
<div id="chatContainer">
  <div class="chat" id="{id}">
    <div class="title"> <span>{title}</span>
      <div style="float:right">
        <input  class="minimize" name="" value="min" type="button">
      </div>
    </div>
    <div class="text"> </div>
    <div class="chatbox">
      <input type="text" class="inputText"  placeholder="enter text" />
    </div>
  </div>
  <div class="chat" id="{id}" style="height:100px">
    <div class="title"> <span>{title}</span>
      <div style="float:right">
        <input  class="minimize" name="" value="min" type="button">
      </div>
    </div>
    <div class="text"> </div>
    <div class="chatbox">
      <input type="text" class="inputText"  placeholder="enter text" />
    </div>
  </div>
</div>
</body>
</html>

我的问题是我希望聊天框在底部对齐现在这是我得到的糟糕结果： 在此处输入图像描述

知道如何解决吗？

（我尝试了垂直对齐但没有成功）

我创建了小提琴：

http://jsfiddle.net/uwmxT/

（点击分钟查看错误）

4

4 回答 4

2

不要在你的聊天框上使用 float:right 而是 display:inline-box 并将它们垂直对齐到底部。

http://jsfiddle.net/willemvb/SfnrU/2/

.chat {
    display: inline-block;
    vertical-align: bottom;
}
于 2013-10-16T14:55:47.573 回答
0

将宽度添加到 css 的以下 id ：

#chatContainer {
    bottom: 20px;
    position: fixed;
    right: 0;
    vertical-align: bottom;
    width: 265px;  // added width
}

演示：http: //jsfiddle.net/7gEfL/1/

于 2013-10-16T12:53:24.617 回答
0

将框 css 位置设置为绝对并将基本定位命令添加到 css 样式

#id_chat{
    position:absolute;
    bottom:0;
    right:250px; /*width of your very right chat box, + you can add e.g. 10px as margin*/
}

http://jsfiddle.net/ueE4b/1/

于 2013-10-16T12:54:33.723 回答
0

它实际上非常简单，我只是做了一个小提琴，它显示了一个固定位置的聊天框

底部有一个输入区域

我制作了一个内部支架以确保它适用于所有浏览器

请参阅此小提琴以查看代码

代码：

<div class="chat">
  <div class="innerchat">
    <input type="text" class="textbox" placeholder="start chatting" />
  </div>
</div>

.chat {
  height: 300px;
  width: 200px;
  display: block;
  border: 1px solid #000;
  position:fixed;
  top:20px;
  left:20px;
}
.chat .innerchat {
  position:relative;
  height:100%;
  width:100%;    
}
.chat .innerchat .textbox {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  border:none;
  background:#ccc;
  color:#404040;
  height:30px;
  text-indent:6px;
}

请享用

于 2013-10-16T13:12:56.490 回答