<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>聊天模块开发</title> <style type="text/css"> .send-right { position:relative; width:auto; //height:auto; //display:inline; max-width:150px; background:#0099FF; border-radius:5px; padding:8px; word-wrap:break-word; float:right; margin-right:16px; } .send-right .arrow-right { position:absolute; top:5px; right:-16px; width:0; height:0; font-size:0; border:solid 8px; border-color:#FFFFFF #FFFFFF #FFFFFF #0099FF; } .send-left { position:relative; width:auto; //height:auto; //display:inline; max-width:150px; background:#0099FF; border-radius:5px; padding:8px; word-wrap:break-word; float:left; margin-left:16px; } .send-left .arrow-left { position:absolute; top:5px; left:-16px; width:0; height:0; font-size:0; border:solid 8px; border-color:#FFFFFF #0099FF #FFFFFF #FFFFFF; } .content{ vertival-align:middle; font-size:12px; } </style> </head> <body> <div> <div style="float:right;"> <img style="width:30px;height:30px;" src="kefu1.png" /> </div> <div class="send-right"> <span class="content"><img style="width:100px;height:100px;" src="kefu1.png"/></span> <div class="arrow-right"></div> </div> <div style="clear:both"></div> <!--清除浮动 --> </div> <br/> <div> <div style="float:right;"> <img style="width:30px;height:30px;" src="kefu1.png" /> </div> <div class="send-right"> <span class="content">可扩展div功能实现</span> <div class="arrow-right"></div> </div> <div style="clear:both"></div> </div> <br/> <div> <div style="float:left;"> <img style="width:30px;height:30px;" src="kefu1.png" /> </div> <div class="send-left"> <span class="content">可扩展div功能实现宽度变长</span> <div class="arrow-left"></div> </div> <div style="clear:both"></div> </div> </body> </html>
div自适应宽度和高度实现
最新推荐文章于 2024-07-03 09:36:39 发布