不定大小的图片居中,并拥有等宽的信息条


看效果就知道了。

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8" />
  <style>
  .item-wrap {width:800px;background:#f60;text-align:center}
  .item-meta, .item-link {display:inline-block;text-align:right}
	.item-intro {display:block;padding:2px;background:#333;color:#fff;text-align:center;}
	.item-link {background:green}
  </style>
 </head>

 <body>
	<div class="item-wrap">
		<span class="item-meta">
			<img alt="" src="" style="display:block;width:300px;height:400px" />
			<span class="item-intro">信息的显示</span>
			<a class="item-link">一个链接</a>
		</span>
	</div>
 </body>
</html>

http://cssor.com/auto-size-image-center-and-info-bar.html

参与评论

电子邮件地址不会被公开。 必填项已用*标注

*

全部分类
Books(4)code(7)database(6)html&css(24)java(11)JavaScript(51)jQuery(24)linux(20)python(1)React(1)share(1)soft(4)solution(54)thinking(17)vim(9)WordPress(8)前端优化(12)拓展(33)服务器(33)移动开发(4)自然(22)