高さが異なる複数の div を下に揃えると問題が発生します。すべての div が一番下にあることを望みます (例の「クローズド チャット」でも)。1つのソリューションは使用しています
position: absolute;
bottom: 0;
right XXpx;
しかし、それを行う他の方法はありますか?JavaScriptで正しい値を設定したくありません。
これが私の例です - http://jsfiddle.net/T3Evb/
高さが異なる複数の div を下に揃えると問題が発生します。すべての div が一番下にあることを望みます (例の「クローズド チャット」でも)。1つのソリューションは使用しています
position: absolute;
bottom: 0;
right XXpx;
しかし、それを行う他の方法はありますか?JavaScriptで正しい値を設定したくありません。
これが私の例です - http://jsfiddle.net/T3Evb/
#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
inline-block
この時点で、vertical-align css プロパティを使用して要素を自由に配置できます。