divをCSSを使用して下から順に配置することはできますか？

Question

私はHTML、CSS & JSを使ってチャットウィンドウを作っています。メッセージを下から上に配置したい 例： 最初のメッセージdivを下に、2番目のメッセージdivを最初に上になど。出来ますか？

Answer 1

私は純粋なCSSソリューションを想像することはできません。あなたはすでにあなたのプロジェクトのために、このライブラリを持っている場合しかし、あなたは何か、これを書くことができ、jQueryのを使用して：

$(':button').click(function() { 
    var message = $('input[type=text]').val(); 
    $('#chat').prepend('<div class="line">'+message); 
}); 

デモ：http://jsfiddle.net/Vbd67/1/

**私は変わっコメント

に応じ prependへ append

Answer 2

display:table-cellとvertical-align:bottomの組み合わせを使用する必要があります。 私はSotirisのフィドルを使ってCSSを修正しました。問題がある場合は私に知らせてください

HTMLは

<div style="display:table; height:200px;"> 
    <div style="display:table-row"> 
      <div id="chat" style="width:400px; border:1px solid black;display:table-cell; vertical-align:bottom"> 
      </div> 
    </div> 

</div> 
<input type="text"><input type="button" value="post"> 
​ 

であり、これはJavaScriptコード

$(':button').click(function() { 
    var message = $('input[type=text]').val(); 
    $('#chat').append($('<div/>').text(message)); 
}); 
​ 

です。

これは私がテーブルレイアウトは常に私には不審であるため、よりよい解決策を探して保持fiddle

ですが、私はそれについてcss-tricks articleを発見し、私がそうであるように、彼らは同じことを行う。..ので、私は、このソリューションがあると思います右のもの

の追加 - 新しいメッセージが一番下に来ているので、下のコード

にスクロールを続ける、我々は一番下までスクロールを維持する必要があります。 フィドルリンクを更新しました

Answer 3

これはjQueryのように使用できます。

var first = $('div > div:first-child'); 
first.appendTo(first.parent()); 

は、いくつかの要素に対処するために、あなたはこれを行うことができます。

$('div > div').each(function() { 
    $(this).prependTo(this.parentNode); 
}); 

Hereは作業ライブデモです。

Answer 4

---

私はむしろ、これはあなたがチャットウィンドウに実装することを検討すべきであるより良いオプションで、これはあなたの質問への答えではないことを知っています。

最新のコメントは、最も基本的なチャットウィンドウの仕組みです。

次の事、あなたはこのすべて使ってCSS行うことができます。このような設計は、いずれかのテーブル行またはリスト要素の使用を必要とするため を 明らかにあなたが非同期的にユーザーを取り込むことができるように、AJAXを使用するためのJavaScriptを使用する必要がありますメッセージやプロフィールPICなどのように、レコード

---

CSS：

<style type="text/css"> 
table#chat_window { 
} 
tr#message_row { 
} 
td#profile_pic { 
} 
td#message { 
} 
</style> 

HTML構造：

<table id="chat_window"> 
    <tr id="message_row"> 
    <td id="profile_pic"></td> 
    <td id="message"></td> 
    </tr> 
</table> 

ORリストを使用して：

<ul id="chat_window"> 
    <li id="message_row"> 
    <div id="profile_pic"></div> 
    <div id="message"></div> 
    </li> 
</ul> 

---

今、あなただけのjavascript使用する必要があります：値をフェッチし、子を追加するために、AJAXを：

1. テーブルベースのチャットを使用している場合は、 wの場合、javascriptを使用してテーブルIDをフェッチし、フェッチする値/メッセージごとに行要素<tr>を追加する必要があります。
2. リストベースのチャットウィンドウを使用している場合は、javascriptを使用してリストIDを取得し、フェッチする値/メッセージごとにリスト要素<li>を追加する必要があります。

   ---

私はあまり時間を持っている任意のタイプミスがある場合、私は申し訳ありません。