解析:
左布局案例: 头像,内容为 一行两列的Table div float在字体多的时候无法达到以上效果 内容的td里面 在分一个一行两列的左右布局 左边是左三角符号 右边是内容没有左上圆角的样式 头像对应的样式是tdtop 左右三角形分别对应left和right 左右内容样式分别是leftbubble 和rightbubble 三角符号的箭头位置代码 border-color: #f5f5f5 transparent transparent transparent; border-color: transparent #f5f5f5 transparent transparent; border-color: transparent transparent #f5f5f5 transparent; border-color: transparent transparent transparent #f5f5f5 对应箭头上 右 下 左-自己测试去。。。。 ; 对应圆角弧度: -moz-border-radius: 0px 15px 15px 15px; -webkit-border-radius:0px 15px 15px 15px; border-radius: 0px 15px 15px 15px; 写法与上面类似 3个属性对应不同浏览器 css 样式 <style type="text/css"> .leftbubble { padding: 10px; border: 2px solid #f5f5f5; /*-moz-border-radius: 15px; -webkit-border-radius: 15px;*/ border-radius: 0px 15px 15px 15px; /* 这里以上是实现框框圆角化 */ position: relative; background-color: #f5f5f5; } .rightbubble { padding: 10px; border: 2px solid #f5f5f5; -moz-border-radius: 0px 15px 15px 15px; -webkit-border-radius:0px 15px 15px 15px; border-radius: 0px 15px 15px 15px; /* 这里以上是实现框框圆角化 */ position: relative; background-color: #f5f5f5; } .left { position: relative; right: -2px; border-width: 10px; border-style: solid dashed dashed dashed; font-size: 0; line-height: 0; border-color: transparent #f5f5f5 transparent transparent; } .right { position: relative; left: -2px; border-width: 10px; border-style: solid dashed dashed dashed; font-size: 0; line-height: 0; border-color: transparent transparent transparent #f5f5f5; } .tdtop { vertical-align: top; } table{ border-collapse:collapse; border-width:0px; } </style> html <div> <table> <tr> <td class="tdtop">头像</td> <td> <table> <tr> <td class="tdtop"><div class="left"></div></td> <td> <div class="leftbubble"> //气泡框内容//气泡框内容// </div> </td> </tr> </table> </td> </tr> </table> </div> <div> <table style="float:right;"> <tr> <td> <table> <tr> <td> <div class="rightbubble"> //气泡框内容//气泡框内容// //气泡框内容//气泡框内容// //气泡框内容//气泡框内容// //气泡框内容//气泡框内容// //气泡框内容//气泡框内容// //气泡框内容//气泡框内容// //气泡框内容//气泡框内容// //气泡框内容//气泡框内容// //气泡框内容//气泡框内容// //气泡框内容//气泡框内容// //气泡框内容//气泡框内容// //气泡框内容//气泡框内容// //气泡框内容//气泡框内容// </div> </td> <td class="tdtop"><div class="right"></div></td> </tr> </table> </td> <td class="tdtop"> 头像 </td> </tr> </table> <div style="clear:both;"></div> </div> |