css - CSS 分割ウィンドウの下部に入力ボックスを取り付ける方法

Question

チャットウィンドウ用のサブディバイダーと入力テキストボックスとともにラッパーディバイダーがあります。しかし、複数のチャットウィンドウがあり、それらを隣り合わせにしたいので input box、プロパティを維持しながらチャットウィンドウの下を維持する方法がわかりません。float:left

ここに私が持っているもののjsfiddleがあります

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

私は何が欠けていますか？

Answer 1

floatコンテナに入れてから取り出すと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>

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