本文主要是介绍前端百科---Web聊天排版，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
当页面需要进行展示对话聊天信息时,好的布局会让人赏心悦目.下面直接看demo:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
<style type="text/css">
html, body, div, img, span {padding: 0;margin: 0;
}
.clearfix {display: block;zoom: 1;overflow: hidden;
}
#container {height: 600px;width: 500px;border: 1px solid grey;overflow-y: auto;}
.message {margin-bottom: 10px;
}
.content-time {text-align: center;margin: 10px auto;
}
.content-time-span {display: inline-block;padding: 1px 10px;background: #dcdcdc;color: #fff;border-radius: 2px;
}
.pic {float: right;width: 40px;height: 40px;
}
.pic-left {float: left;width: 40px;height: 40px;
}
.text-style {text-align: right;
}
.text-style-left {text-align: left;
}
.pos, .pos-left {margin: 0 10px;这篇关于前端百科---Web聊天排版的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
