html - 底部div内的多个div

Question

当我将具有不同高度的多个 div 对齐到底部时出现问题。我希望所有 div 都在底部（甚至是示例中的“封闭聊天”）。一种解决方案是使用

position: absolute; 
bottom: 0; 
right XXpx;

但是还有其他方法吗？我不想用 javascript 设置正确的值。

这是我的例子 - http://jsfiddle.net/T3Evb/

Answer 1

#chatbar {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
}

.chat {
  display: inline-block;
  background-color: green;
  width: 200px;
  text-align: center;
  margin-right: 10px;
}

.chat.open {
  display: inline-block;
  height: 130px;
  vertical-align: bottom;
}

<div id="chatbar">
  <div class="chat open">
    Chat window
  </div>
  <div class="chat">
    Closed chat window
  </div>
</div>

我删除了float css 属性，并将这些s的显示行为更改为.divinline-block

此时，vertical-align css 属性允许按照我的意愿对齐元素。

Answer 2

很简单：将一个 html 标签作为容器，另外一个作为绝对标签，如下所示：

<div class="chat">
   <div class="chat_contain">
      <div class="chat_window"></div>
   </div>
   <div class="chat_contain">
      <div class="chat_window"></div>
   </div>
</div>

和CSS：

.chat{
   width:auto;
   display:inline-block;
   position:fixed;
   bottom:0px;
   right:0px;
 }
.chat_contain{
   position:relative;
   float:right;
 }
.chat_window{
   position:absolute:
   bottom:0px;
   left:0px;
 }

请记住，我的代码用于设置位置，而不是所有样式表。自己编辑祝你好运