Question

这是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>

我的问题是我希望聊天框在底部对齐现在这是我得到的糟糕结果： enter image description here

知道如何解决这个问题吗？

（我尝试了纵向对齐但没有成功）

我创造了小提琴：

http://jsfiddle.net/uwmxT/

（点击分钟查看错误）

Answer 1

不要使用float：right但是在聊天框上显示：inline-box并垂直对齐它们。

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

.chat {
    display: inline-block;
    vertical-align: bottom;
}

Answer 2

将宽度添加到css的后续id：

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

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

Answer 3

将box css位置设置为absolute并将基本定位命令添加到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/

Answer 4

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

在其底部有一个输入区域

我做了一个内部持有人，以确保它适用于所有浏览器

See this fiddle查看代码

代码：

<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;
}

享受

在另一个div的底部对齐div？

4 个答案: