html - CSS:将两个div对齐到右侧页面的底部，position:absolute

Question

我正在尝试在 css 中制作一个带有标题的简单聊天框，我正在尝试将聊天对齐到页面底部和页面右侧。我试过使用

float: right;
bottom: 0;
position: absolute;

它将它与页面底部对齐，但不向右对齐。这是我的完整代码

CSS

#chatbox {
    height: 360px;
    width: 320px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    float: right;
    bottom: 0;
    position: absolute;
}
.chatheader {
    font-family:'PT Sans';
    background: #999;
    width: 322px;
    height: 36px;
    color: #fff;
    text-align: center;
    padding-top: 15px;
}

HTML

<div class="chatheader">chatboxheader</div>
<div id="chatbox">

</div>

这是代码的演示 DEMO这只是一个非常简单的脚本，因为我试图先对齐它，稍后我会让它看起来更好。提前感谢任何可以帮助我的人!

Answer 1

因为你想要页面右下角的聊天头和聊天框。我稍微修改了代码。我将它们都包装在一个 div 中。

HTML:

<div id="chat-container">
    <div class="chatheader">chatboxheader</div>
    <div id="chatbox"></div>
</div>

CSS:

#chat-container {
    right :0;
    bottom: 0;
    position: absolute;
}

right:0 将使元素保持在最右边。

Updated fiddle here.