CSS чат пузыри с поплавком - PullRequest
Новая
       5

CSS чат пузыри с поплавком

0 голосов
/ 20 февраля 2019

Я пытаюсь создать окно чата с сообщениями от пользователя справа и сообщениями от другого человека слева.Сначала я попытался сделать это без floats и потерпел неудачу.Проведя некоторые исследования, я обнаружил, что обычно это делается с помощью float .Я переписал его, используя floats, но он все еще не работает.

Обновление: float лучшее решение для этого типа дизайна? 

.user {
  float: right;
  background-color: deepskyblue;
  margin-right: 20px;
  font-size: 25px;
  color: white;
}

.friend {
  float: left;
  background-color: orchid;
  margin-left: 20px;
  font-size: 25px;
  color: white;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
</head>

<body>
  <div contenteditable="true" class="user clearfix">
    Have you completed the css chat tutorial
  </div>
  <div contenteditable="true" class="friend clearfix">
    No I did not.
  </div>
  <div contenteditable="true" class="user clearfix">
    Is it working?
  </div>
  <div contenteditable="true" class="friend clearfix">
    NO :(
  </div>
</body>

</html>

Ответы [ 2 ]

0 голосов
/ 20 февраля 2019

лучшее решение для поплавков?

Я думаю, что это относительно разработчика и ситуации.Нет «неправильного» пути, если это то, что вы просите.Но есть способы, которые помогут вам в долгосрочной перспективе, если вы хотите проявить гибкость и добавить больше возможностей.Вот пример использования flex-свойств: 

body { 
  background-color: snow; 
  display: flex;
  flex-flow: column nowrap;
}
body div {
  font-size: 18px;
  padding: 10px;
  color: white;
  border-radius: 5px;
}
.user {
  background-color: deepskyblue;
  align-self: flex-end;
}
.friend {
  background-color: orchid;
  align-self: flex-start;
}
<body>
  <div contenteditable="true" class="user">
    Have you completed the css chat tutorial
  </div>
  <div contenteditable="true" class="friend">
    No I did not.
  </div>
  <div contenteditable="true" class="user">
    Is it working?
  </div>
  <div contenteditable="true" class="friend">
    NO :(
  </div>
</body>
0 голосов
/ 20 февраля 2019

Это?Я удалил ::after

.user {
  float: right;
  background-color: deepskyblue;
  margin-right: 20px;
  font-size: 25px;
  color: white;
}

.friend {
  float: left;
  background-color: orchid;
  margin-left: 20px;
  font-size: 25px;
  color: white;
}

.clearfix {
  clear: both;
  display: table;
  margin:5px 0;
}
 <div contenteditable="true" class="user clearfix">
    Have you completed the css chat tutorial
  </div>
  <div contenteditable="true" class="friend clearfix">
    No I did not.
  </div>
  <div contenteditable="true" class="user clearfix">
    Is it working?
  </div>
  <div contenteditable="true" class="friend clearfix">
    NO :(
  </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...