是否可以使用CSS從底部開始將div定位在另一個div上？

我有一個聊天窗口使用HTML，CSS & JS。我想從下到上定位消息。例如：底部的第一個消息div，第二個消息div在第一個頂部等。可能嗎？是否可以使用CSS從底部開始將div定位在另一個div上？

2012-08-11 Andrei

你試過了什麼？ – vittore 2012-08-11 11:30:13

是的，但是，請你在js小提琴上更新它，或者告訴我你嘗試了什麼？ – Chandrakant 2012-08-11 11:31:56

我知道一種方式 - 只有CSS - 但在我看來，必須有更好的方法。我會做一個小提琴並在這裏發佈。給我幾分鐘。 – 2012-08-11 11:47:16

我無法想象一個純粹的CSS解決方案。但使用jQuery，如果你已經有了這個庫爲您的項目，你可以寫這樣的東西：

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

演示：http://jsfiddle.net/Vbd67/1/

**我改變了append到prepend根據評論

來源

2012-08-11 11:33:52 Sotiris

您的消息是從上到下的副本。問題是自下而上。 – 2012-08-11 11:37:07

@guymograbi謝謝你，我的錯 – Sotiris 2012-08-11 11:40:07

您應該使用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它與他們做同樣的，因爲我做的..所以我猜這個解決方案正確的那一個。

加入 - 保持滾動到底代碼

由於新的消息在底部來臨，我們需要不斷滾動至底部。我更新了小提琴鏈接

來源

2012-08-11 11:54:53

您可以使用jQuery來做到這一點，如;

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

要處理一些元素，你可以這樣做：

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

Here是一個工作現場演示。

來源

2012-08-11 12:29:55

enter image description here

我知道這是不是一個回答你的問題，而這是你應該考慮在聊天窗口中實現一個更好的選擇。

最新評論應該在底部，這是大多數基本聊天窗口的工作原理。

接下來的事情，你可以做到這一切使用CSS：因爲這樣的設計要求要麼使用錶行或列表中的元素顯然，你必須使用JavaScript使用AJAX，這樣就可以以異步方式獲取用戶像信息和個人資料相片等記錄

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>

或使用列表：

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

現在你必須只使用javascript：Ajax來獲取值，並添加一個孩子：

如果您使用基於表的聊天窗口w，那麼你必須使用javascript獲取表格id，併爲每個值獲取行元素<tr>。
如果您使用的是基於列表的聊天窗口，那麼您必須使用javascript獲取列表ID，併爲您獲取的每個值/消息添加列表元素<li>。

我很抱歉，如果有任何錯別字我沒那麼多時間。

來源

2012-08-11 14:50:12 GLES

是否可以使用CSS從底部開始將div定位在另一個div上？

回答

相關問題