div自适应宽度和高度实现

最新推荐文章于 2024-07-03 09:36:39 发布

丹心情伤

最新推荐文章于 2024-07-03 09:36:39 发布

阅读量1.9k

点赞数 1

分类专栏： Web开发文章标签： Web css html

本文链接：https://blog.csdn.net/qq_30401659/article/details/70903827

版权

Web开发专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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>