html - 下部 div 内の複数の div

Question

高さが異なる複数の div を下に揃えると問題が発生します。すべての div が一番下にあることを望みます (例の「クローズド チャット」でも)。1つのソリューションは使用しています

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 プロパティを削除し、それらの表示動作を に変更しました。divinline-block

この時点で、vertical-align css プロパティを使用して要素を自由に配置できます。