支持图文并茂的figure标签

figure标签是块级元素，下面我们通过效果加源码来看看这个标签的用法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>figure元素</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
img{
width:100px;
height:100px;
padding-top:20px;
box-sizing:border-box;
}
figure{
width:20%;
background-color:red;
text-align:center;
display:inline-block;
}
p {
text-align:center;
float:left;
}
</style>
</head>
<body>
<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="../images/未标题-8.jpg" width="350" height="234" />
</figure>
</body>
</html>

 

posted on 2016-06-05 11:24  冬刻忆  阅读(150)  评论(0)    收藏  举报