html网页聊天布局显示,html/css实现聊天布局

效果图

项目结构

html代码

爱你呦

2019-5-17

哈哈哈哈哈

干嘛呢

吃饭饭

确定

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 {

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 {

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;

}