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

Question

我有一个包装分隔器以及一个用于聊天窗口的子分隔器和一个输入文本框。但我不知道如何在input box保留属性的同时保留聊天窗口下方float:left，因为会有超过 1 个聊天窗口，我希望它们彼此相邻。

这是我所拥有的一个jsfiddle

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

我错过了什么？

Answer 1

floatfloat: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>

Answer 2

对于初学者，我会将您的文本框 div 放在您的聊天框 div 内。
HTML

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

然后你想让那个文本框到窗口 CSS的底部

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

    .messages
    {

    position:absolute; bottom:0;
        float:left;
    }

Answer 3

<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>

和

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

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

...基本上浮动每个容器而不是单个元素 - 如果“聊天标签容器”应该是顶级聊天容器，那么在两者之间有一个级别