كيف يمكن أنشاء واجهة دردشة متطورة للويب

بتاريخ 1 ساعة قال علي الكاسر:

لم ينجح الأمر اخي ولم يحدث أي تغيير

سأضيف قالب HTML + CSS يمكنك الاستفادة منه في عمل بنية لمنطقة الدردشة:

HTML:

<!-- الحاوي الرئيسية -->
<div id="Thread">
  
  <div id="Header"></div>
  <!-- قائمة عرض الرسائل -->
  <div id="MessageList">
    <!-- رسائل -->
    <div class="message">
      <p>Latest</p>
    </div>
    <div class="message">
      <p>Older</p>
    </div>
    <div class="message">
      <p>Oldest</p>
    </div>
  </div>
  <div id="Footer"></div>
</div>

ثم CSS:

#Thread {
  background-color: mediumseagreen;
  display: flex; /* نطبق فليكس للحاوية */
  flex-direction: column;
  overflow-y: hidden;
  height: 100vh;
}

#Header {
  height: 25px;
  background-color: blueviolet;
}

#MessageList {
  background-color: deepskyblue;
  height: 100%;
  display: flex;  /* ونطبق فليكس للقائمة */
  flex-direction: column-reverse;
  overflow-y: auto;
}

.message {
  background-color: white;
  padding: 4px;
  border: 1px solid #f9f9f9;
  font-size: 1rem;
  margin: 4px;
}

#Footer {
  height: 100px;
  background: red;
}

الملاحظة من الإجابة الأولى أن الحاوية لعنصر يجب أن نضيف لها display: flex; لكي تعمل

يمكنك التعلم أكثر عن الخاصية Flex من توثيق أكاديمية حسوب من wiki.hsoub/CSS/flex

يمكن استخدام خاصية Flex في CSS، حيث يمكنك إضافة التالي لحاوية الرسائل:

#MessageList {
    flex-direction: column-reverse; /* سيتم عكس عرض العناصر داخلها */
}

سيتم عرض الأولاد لهذه الحاولة بترتيب من الأسفل للأعلى

بتاريخ 1 دقيقة مضت قال Wael Aljamal:

يمكن استخدام خاصية Flex في CSS، حيث يمكنك إضافة التالي لحاوية الرسائل:

#MessageList {
    flex-direction: column-reverse; /* سيتم عكس عرض العناصر داخلها */
}

شكرا سوف اجربه 

 

بتاريخ 6 دقائق مضت قال Wael Aljamal:

يمكن استخدام خاصية Flex في CSS، حيث يمكنك إضافة التالي لحاوية الرسائل:

#MessageList {
    flex-direction: column-reverse; /* سيتم عكس عرض العناصر داخلها */
}

 

لم ينجح الأمر اخي ولم يحدث أي تغيير