CSS如何将输入框附加到分隔窗口的底部

Question

我有一个包装器分隔符以及一个用于聊天窗口的子分隔符和一个输入文本框。但是我不确定如何在保持 float:left 属性的同时将 input box 保持在聊天窗口下方，因为会有多个聊天窗口，我想要他们彼此挨着。

这是我的 jsfiddle

http://jsfiddle.net/pu7gK/1/

我错过了什么？

Answer 1

float ing 容器并删除 float:left来自 .chat-window应该产生预期的结果。 <div class="chat-window">默认显示为 block所以它会自动创建一个换行符，因此 <input>自然出现在下面。

多个.chat-tab-container将彼此相邻漂浮。

CSS

.chat-tab-container {
    float:left;
}

.chat-window {
    background:#fff;  
    height:200px;  
    width:250px;  
    border:1px solid #ACD8F0;  
    overflow:scroll;
}

HTML

<div class="chat-tab-container">
    <div class="chat-window"></div>
    <input type="text" class="messages"/>
</div>

<div class="chat-tab-container">
    <div class="chat-window"></div>
    <input type="text" class="messages"/>
</div>