效果图
项目结构
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; }