实例演示_[示例]如何使用CSS将文本环绕在图像周围

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.container{
  width:500px;
  margin:0 auto;
}
.TextWrap{
  float: right;
  margin: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
}
.TextWrapLeft{
  float: left;
  margin: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1 style="color: green; text-align: center;">
	WebKaka.com
</h1>
<h3 style="color: black; text-align: center;">
	学习编程的好平台
</h3>
<img src="1.png" class="TextWrap">	
<p>
有多少次你在寻找时感到沮丧
获取编程/算法的良好集合
/面试问题？你期望什么？什么
你明白了吗？创建此门户的目的是：
提供良好的书面、深思熟虑和良好的
解释选定问题的解决方案。
IIT最喜欢解决编程问题
有效的方法。
</p>
<img src="1.png" class="TextWrapLeft">	
<p>
有多少次你在寻找时感到沮丧
获取编程/算法的良好集合
/面试问题？你期望什么？什么
你明白了吗？为招聘做准备
驱动基于产品的公司，如微软，
亚马逊、Adobe等提供免费在线广告
准备课程。创建此门户的目的是：
提供良好的书面、深思熟虑和良好的
解释选定问题的解决方案。
IIT最喜欢解决编程问题
有效的方法。除了极客，他还有
作为软件开发人员与DE Shaw公司合作
吉特·诺伊达担任助理教授。它是
学习编程的好平台。它是
教育网站。为招聘做准备
驱动基于产品的公司，如微软，
亚马逊、Adobe等提供免费在线广告
准备课程。除了极客，他还有
作为软件开发人员与DE Shaw公司合作
吉特·诺伊达担任助理教授。它是
学习编程的好平台。它是
教育网站。
</p>
</div>
</body>
</html>

卡卡测速网> html技术> [示例]如何使用CSS将文本环绕在图像周围

添加收藏下载源代码|

运行结果

demo.html

运行代码

79
//-->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX