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属性，并将div的{{3}}行为更改为inline-block。

此时，display 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;
 }

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

底部div内有多个div

2 个答案: