CSS kullanarak alttan başlayarak bir üst üste bir div yerleştirmek mümkün mü?

Question

HTML, CSS & JS kullanılarak yapılmış bir sohbet pencerem var. İletiyi aşağıdan yukarıya doğru konumlandırmak istiyorum. Örnek: ilk mesaj div altta, 2. mesajın ilk üstünde div. Mümkün mü?

Answer 1

Saf bir CSS çözümü hayal edemiyorum. Zaten proje için bu kitaplığı varsa Ama bir şey bu yazabilirim, jQuery kullanarak:

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

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

** Değiştim comment

göre prepend için append

Answer 2

display:table-cell ve vertical-align:bottom'un bir kombinasyonunu kullanmalısınız. Sotiris'in kemanını kullanıyorum ve CSS'sini tamir ediyorum.

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

Ve bu JavaScript kodu

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

bir sorun varsa lütfen haber verin olduğunu.

Bu benim masa düzeni her zaman bana şüpheli olduğu için daha iyi bir çözüm ararken tuttu fiddle

, ama ben bu konuda css-tricks article bulundu ve benim yaptığım gibi onlar aynı şeyi .. o yüzden bu çözüm olduğunu tahmin doğru olan.

EKLEME - yeni mesajlar altta geliyor beri alt kod

için kaydırma tutmak, biz dibe kaydırma tutmak gerekir. Bilmece bağlantıyı güncelledim

Answer 3

jQuery'yi kullanarak bunu yapabilirsiniz;

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

birkaç unsurlarla uğraşmak için, bunu yapabilirsiniz:

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

Here çalışan Canlı Demo olduğunu. Bunun sorunuza bir cevap olmadığını biliyoruz

Answer 4

---

yerine bu sohbet penceresinde uygulanması düşünmelisiniz daha iyi bir seçenektir.

En yeni yorum en alttan olmalı, en basit sohbet pencereleri bu şekilde çalışır.

sonraki şey, bu her kullanarak css yapabilirsiniz: Böyle bir tasarım ya tablo satırları veya liste elemanlarının kullanımını gerektirdiğinden Açıkçası zaman uyumsuz kullanıcıyı alabilmesi için, ajax kullanarak için javascript kullanmak zorunda mesajlar ve profil resmi vb gibi kayıtlar

---

CSS:

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

HTML YAPISI:

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

VEYA KULLANMA LİSTELERİ:

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

---

Artık ayrıntılı olarak sadece javascript kullanarak: ajax değerleri getir ve bir çocuk eklemek için:

1. Masa tabanlı chat-windo kullanıyorsanız w, daha sonra javascript kullanarak tablo kimliğini getirmeniz ve getirdiğiniz değer/mesaj başına <tr> satır öğesini eklemeniz gerekir.
2. Liste tabanlı sohbet penceresi kullanıyorsanız, javascript kullanarak liste kimliğini getirmeniz ve getirdiğiniz değer/mesaj için liste öğesi <li> eklemeniz gerekir. Ben daha az zaman var herhangi bir yazım hatası olup olmadığını

   ---

üzgünüm.