Открыть чат divs бок о бок в нижней части контейнера, чат в стиле Facebook

Я работаю со следующим кодом, который предназначен для основного чата в стиле Facebook.Открыть чат divs бок о бок в нижней части контейнера, чат в стиле Facebook

.otherarea div предназначен для проведения нескольких разделов чата. .friends div предназначен для отображения списка пользователей в Интернете.

При нажатии любого пользователя внутри .friends, мне нужно, чтобы показать одну чат окно внутри .otherarea в правом нижнем углу .otherarea

но не работает (как показано в FIDDLE).

Я хочу открыть один чат в правом нижнем углу от .otherarea, если пользователь нажмет на другого пользователя, второй чатбокс должен открываться бок о бок в предыдущем чате, как это происходит в чате Facebook.

<!DOCTYPE html> 
<!-- 
To change this license header, choose License Headers in Project Properties. 
To change this template file, choose Tools | Templates 
and open the template in the editor. 
--> 
<html> 
    <head> 
     <title>TODO supply a title</title> 
     <meta charset="windows-1252"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <style> 
      html,body{ 
       height:100%; 
       margin:0 
      } 
      .friends 
      { 
       height:100%; 
       width:20%; 
       background-color:#ccccff; 
       float:right 
      } 
      .otherarea{ 
       height:100%; 
       width:80%; 
       background-color:cadetblue; 
       float:left; 
       position:relative; 

      } 
      .chat 
      { 
       height:200px; 
       width:200px; 
       background-color: red; 
       display:inline-block; 
       vertical-align: bottom 





      } 
      #main 
      { 
       position:relative; 
       width:100%; 
       height:100%; 
      } 
     </style> 
     <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 
     <script> 
      $(document).ready(function(){ 

       $(".friends").click(function(){ 
        $(".otherarea").append("<div class=chat></div>"); 

       }); 

      }); 
     </script> 
    </head> 
    <body> 
     <div id="main"> 
     <div class="otherarea"></div> 
     <div class="friends"></div> 
     </div> 
    </body> 
</html>

источник

2015-08-07 Hemal

Я изменил вашу скрипку, пожалуйста, проверьте его: https://jsfiddle.net/Lz03Lgwc/3/

Я добавил display: flex; к контейнеру и align-self: flex-end; к chat класса, что позволяет им быть показано справа рядом друг с другом на дно.

 .otherarea{ 
      height:100%; 
      width:80%; 
      background-color:cadetblue; 
      float:left; 
      position:relative; 
      display: flex; /* <- this to the container */ 
      justify-content: flex-end; 
     } 

     .chat 
     { 
      height:200px; 
      width:200px; 
      background-color: red; 
      display:inline-block; 
      align-self: flex-end; /* <- and this to the elements */ 
     }

Flexbox широко поддерживается, но, разумеется, у вас могут возникнуть проблемы с IE 10 и ниже. See the compatibility list

источник

2015-08-07 07:23:42

Спасибо, что это сработало. IE10 не является проблемой, так как он работает над EDGE. Еще раз спасибо. – Hemal

Открыть чат divs бок о бок в нижней части контейнера, чат в стиле Facebook

ответ

Смежные вопросы