前端百科---Web聊天排版

最新推荐文章于 2024-03-01 20:32:56 发布

VIP文章攻城狮小趙

最新推荐文章于 2024-03-01 20:32:56 发布

阅读量1.2k

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/u013390913/article/details/53861403

版权

当页面需要进行展示对话聊天信息时,好的布局会让人赏心悦目.下面直接看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;

最低0.47元/天解锁文章

攻城狮小趙

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端百科---Web聊天排版

当页面需要进行展示对话聊天信息时,好的布局会让人赏心悦目.下面直接看demo: Documenthtml, body, div, img, span { padding: 0; margin: 0;}.clearfix { display: block; zoom: 1; overflow: hidden;}#container { height: 600px
复制链接

扫一扫