常用--左边图片右边内容_前端左侧图片右侧文字布局-优快云博客

本文链接：https://blog.youkuaiyun.com/dongsdh/article/details/103675066

左图片，有内容排版

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.ell{
			display: inline-block;
		    padding: 0 4px;
		    text-overflow: ellipsis;
		    white-space: nowrap;
		    overflow: hidden;
		    vertical-align: middle;
		}
		.ell3{
			overflow:hidden;
			text-overflow: ellipsis;
			display:-webkit-box !important;
			-webkit-line-clamp:3;
			-webkit-box-orient:vertical;
		}
		.litembox{
			margin: 20px;
			width: 600px;
		}
		.litem{
			min-height: 50px;
			position: relative;
			padding: 10px;
			box-sizing: border-box;
			padding-left: 270px;
			min-height: 155px;
			border: 1px solid #ddd;
			margin-bottom: 10px;
		}
		.ileft{
			position: absolute;
			top: 10px;
			left: 10px;
		}
		.iright{
			position: relative;
			height: 135px;
		}
		.irightbox{
			position: relative;
			height: 100%;
		}
		.iright .icitem{
			position: relative;
			
		}
		.iright .icitem p{
			display: inline-block;
			width: 60%;
			text-align: justify;
		}
		.iright .icitem span{
			position: absolute;
			top: 2px;
			right: 0;
		}
		.iright .contentabslast{
			position: absolute;
		    bottom: 0;
		    width: 100%;
		}
		
	</style>
	<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
	<div class="litembox">
		
	</div>
	
	<script>
		fun()
		function fun(){
			let shtml='';
			for(var i=0,len=5;i<len;i++){
		    	shtml+='<div class="litem">'
					+'		<div class="ileft">'
					+'			<img src="1.png" onerror=\'onerror=null;src="404.png"\' />'
					+'		</div>'
					+'		<div class="iright">'
					+'			<div class="irightbox">'
					+'				<div class="icitem contentabs"><p class="ell" title="内容">少熬夜 多运动 记得笑 少熬夜 多运动 记得笑</p><span>2019-12-23</span></div>'
					+'				<div class="icitem contentabs"><p class="ell3" title="内容">我是东，我来自南方，我不喜欢熬夜，我喜欢夜熬我，我不喜欢熬夜，我喜欢夜熬我，我不喜欢熬夜，我喜欢夜熬我</p></div>'
					+'				<div class="icitem contentabslast"><p></p><span>提交</span></div>'
					+'			</div>'
					+'		</div>'
					+'  </div>'
			}
			$('.litembox').html(shtml);
		}
		
	</script>
</body>
</html>