实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>8.图片混排</title>
<style type="text/css">
.wrap {
width: 500px;
border: 1px solid lightgray;
background-color: lightyellow;
padding:15px;
}
.wrap h2 {
text-align: center;
}
.wrap h2 + p {
text-align: right;
font-size: 0.8em;
}
.wrap .box1 p {
line-height: 1.6em;
text-indent: 2em;
}
.wrap .box1 img {
width: 200px;
vertical-align: middle;
float: left;
margin-right: 15px;
/*
如何去掉IMG默认的下方空白区：
1.給父级添加一个积小的行高
2.img 有一个vertical-align:bottom;*/
}
</style>
</head>
<body>
<div class="wrap">
<h2>能把黄段子讲得清新脱俗又高雅？我就佩服费玉清！</h2>
<p>2017-03-27 18:41 来源：搜狐网</p>
<hr>
<div class="box1">
<img src="fyq.gif" alt="">
<p>因为他可以明目张胆地在台上把黄段子说得清新脱俗、高雅而不low。以至于费玉清每次讲完一个黄段子之后，台下的观众都会高呼“再来一个！”毕竟小哥的内容储备量实在是太大了，基本上连说一个小时黄段子都不会重样。先给大家细数小哥都讲过那些黄段子：老公想要考考老婆，说：“有没有这样的一句话，我听了之后会特别开心，可是仔细一想又会特别生气？”太太想了想说：“对了，你的鸡鸡，是你朋友里面最大的”。</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
