html/css实现聊天布局

效果图

项目结构

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<title></title>
	</head>
	<body>
		<div class="box">
			<div class="item left">
				<img class="header-img" src="img/img.jpeg" />
				<span class="message">爱你呦</span>
			</div>
			<div class="chart-timer">
				2019-5-17
			</div>
			<div class="item right">
				<img class="header-img" src="img/img.jpeg" />
				<span class="message">哈哈哈哈哈</span>
			</div>
			<div class="item left">
				<img class="header-img" src="img/img.jpeg" />
				<span class="message">干嘛呢</span>
			</div>

			<div class="item right">
				<img class="header-img" src="img/img.jpeg" />
				<span class="message">吃饭饭</span>
			</div>
		</div>

		<div class="input-box">
			<input type="text" />
			<button>确定</button>
		</div>
	</body>
</html>

css

/*
聊天item采用flex布局
*/
.item {
	display: flex;
	margin-bottom: 10px;
}

.left {
	flex-direction: row;
}

.right {
	flex-direction: row-reverse;
}

.right .message {
	margin-right: 10px;
}
.left .message{
	margin-left: 10px;
}

.header-img {
	width: 42px;
	height: 42px;
	border-radius: 100px;
}

.message {
	border-radius: 10px;
	display: flex;
	background: #efefef;
	min-height: 25px;
	padding: 9px 10px;
	align-items: center;
	color: #222121;
}

.input-box {
	position: absolute;
	bottom: 0px;
	left: 0;
	right: 0;
	display: flex;
	padding: 4px 6px;
	box-sizing: border-box;
}

.input-box input {
	flex: 1;
	border-radius: 10px;
	border: 1px #cecece solid;
	padding: 3px 4px;
	    outline: none;
}

.input-box button {
	width: 80px;
	background: #2196F4;
	border-radius: 21px;
	border: 1px #fffa solid;
	color: #ffffff;
	margin: 0px 6px;
	outline: none;
}
button:active{}

.chart-timer{
	text-align: center;
    color: #616161;
    font-size: 13px;
}