Ist es möglich, ein div über CSS von einem anderen zu positionieren?

Question

Ich habe ein Chat-Fenster mit HTML, CSS & JS gemacht. Ich möchte die Nachricht von unten nach oben positionieren. Beispiel: erste Nachricht div am unteren, zweite Nachricht div auf der ersten und so weiter. Ist es möglich?

Answer 1

Ich kann mir keine reine CSS-Lösung vorstellen. Aber Mit jQuery, wenn Sie bereits diese Bibliothek für Ihr Projekt haben, können Sie diese etwas schreiben könnte:

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

Demo:http://jsfiddle.net/Vbd67/1/

** I änderte sich die append zu prepend nach dem Kommentar

Answer 2

Sie sollten eine Kombination von display:table-cell und vertical-align:bottom verwenden. Ich benutze Sotiris 'Geige und korrigiere CSS.

Die HTML ist

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

Und dies ist der JavaScript-Code

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

Bitte lassen Sie mich wissen, ob es ein Problem gibt.

Dies ist der fiddle

ich für eine bessere Lösung gehalten Suche, weil Tabellenlayout mir immer verdächtig ist, aber ich fand css-tricks article darüber, und sie tun das gleiche wie ich .. tun, so denke ich, ist diese Lösung das richtige.

ADDING - halten scroll nach unten Code

Da neue Nachrichten auf dem Boden kommen, müssen wir blättern nach unten zu halten. Ich habe den Fiddle Link aktualisiert

Answer 3

Sie können dies mit jQuery wie;

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

mit mehreren Elementen umgehen, können Sie dies tun:

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

Here ist ein funktionierendes Live-Demo.

Answer 4

---

Ich weiß, dass dies auf Ihre Frage keine Antwort ist, vielmehr ist dies eine bessere Option, die Sie im Chat-Fenster Implementierung in Betracht ziehen sollten.

Neueste Kommentar sollte auf der Unterseite sein, das ist, wie die meisten grundlegenden Chat-Fenster arbeiten.

Das nächste, was können Sie diese alle mit CSS tun: , weil eine solche Konstruktion entweder Reihen Verwendung von Tabelle erfordert oder Listenelemente Offensichtlich haben Sie Javascript verwenden für Ajax verwenden, so dass Sie asynchron Benutzer holen kann Aufzeichnungen wie Nachrichten und profile pic etc

---

CSS:

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

HTML-Struktur:

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

ODER DAS surfen

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

---

Jetzt müssen Sie nur noch mit Hilfe von Javascript: Ajax-Werte holen und ein Kind hinzufügen:

1. Wenn Sie Tabellen-basierte Chat-Windo verwenden w, dann müssen Sie die Tabellen-ID mithilfe von JavaScript abrufen und das Zeilenelement <tr> pro Wert/Nachricht, die Sie abrufen, hinzufügen.
2. Wenn Sie ein listenbasiertes Chatfenster verwenden, müssen Sie die Listen-ID mithilfe von JavaScript abrufen und das Listenelement <li> pro Wert/Nachricht, die Sie abrufen, hinzufügen.

   ---

Es tut mir leid, wenn es irgendwelche Fehler, die ich weniger Zeit haben.