效果图

项目结构

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;

}

html/css实现聊天布局的更多相关文章

  1. CSS HTML元素布局及Display属性

    本篇文章主要介绍HTML的内联元素.块级元素的分类与布局,以及dispaly属性对布局的影响. 目录 1. HTML 元素分类:介绍内联元素.块级元素的分类. 2. HTML 元素布局:介绍内联元素. ...

  2. CSS多列布局

    × 目录 [1]列宽 [2]列数 [3]列间距[4]列rule[5]跨列[6]列填充[7]多列 前面的话 CSS新增了多列布局特性,可以让浏览器确定何时结束一列和开始下一列,无需任何额外的标记.简单来 ...

  3. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  4. DIV+CSS列表式布局（同意图片的应用）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. PHP.4-DIV+CSS标准网页布局准备工作（下）

    DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...

  6. PHP.3-DIV+CSS标准网页布局准备工作（上）

    DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...

  7. html响应式布局，css响应式布局，响应式布局入门

    html响应式布局,css响应式布局,响应式布局入门 >>>>>>>>>>>>>>>>>>& ...

  8. 演示：纯CSS实现自适应布局表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. css两列布局，一边固定宽度，另一边自适应

    <!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8" ...

随机推荐

  1. Qt & opencv 学习（一）

    Qt也没怎么系统学过,opencv也没系统学过.慢慢来,一步一步弄清楚吧. 天嵌科技有个文档,先去看这个文档,主要是开发环境的配置.文档名字就是QT应用程序开发手册-20150918.pdf.在QT里 ...

  2. thinkphp中的volist

    在thinkphp中,使用volist一定要注意,<volist name='' id=''></volist>,name和id的变量一定要不一致,如果一致的话会导致当voli ...

  3. bzoj4105: [Thu Summer Camp 2015]平方运算

    填坑 我不知道怎么算的,但是所有环的LCM数不会超过60 然后用线段树维护这个东西,每个节点记录子树内的循环节 没到循环节的暴力枚举 复杂度是nlogn再乘以循环节长度 #include<cst ...

  4. hadoop-3.0.0-alpha4启动

    全部启动或者全部停止(注意:第一次启动需要先格式,以后就不需要格式了,不能多次格式化) 1.启动 [root@master sbin]# pwd /usr/hadoop/hadoop-3.0.0-al ...

  5. 【2017省中集训DAY1T1】 小X的质数

    [题目链接] 点击打开链接 [算法] 如果一个数是小X喜欢的数,那么有两种可能: 1.这个数是质数 2.这个数除以它的最小质因子是一个质数 所以我们可以用线性筛+前缀和的方式预处理,询问的时候O(1) ...

  6. NOIP2009 靶型数独

    传送门 这道题比我想象之中要暴力一些. 自己一开始有一份写9*9数独的代码,自己试了一下直接交上去只有40分.看来这样是肯定不行的.考虑优化,想在中间贪贪心啥的,但是难以保证正确性.最后学了一招,从数 ...

  7. NOIP2005题解

    传送门 考查题型 dp 模拟 贪心 T1 谁拿了最多的奖学金 题目描述 某校的惯例是在每学期的期末考试之后发放奖学金.发放的奖学金共有五种,获取的条件各自不同: 1) 院士奖学金,每人8000元,期末 ...

  8. 开发微信小程序入门前

    开发微信小程序入门前 百牛信息技术bainiu.ltd整理发布于博客园 2016年09月21日晚 微信发不了微信“小程序”的内测版,一时间整个互联网都炸了锅.个大新闻.论坛都在讨论这个事情. 作为互联 ...

  9. RDA PQ工具使用 （Adi Analysis）

    PQ工具“ColorAdjustTool.exe”,请注意芯片的选择: RDA512C选择533 RDA8501选择331 RDA8503选择131  工模菜单 COLOR LUT: R/G/B/Y/ ...

  10. 单片机和Linux都想学_换个两全的方法学习单片机

    本节教你如何学习单片机,如何选择合适的开发板和开发工具. 现在我们知道单片机是要学习的,那么怎么去学习单片机?在上一课我们说不要使用老一套的方法学习,实际上是指的两个问题. 第一:选择什么开发板: 第 ...