運用浮動的知識實現div塊在左,文本在右的環繞效果。
效果如下:
任務
如果文本環繞圖片或者環繞某個塊元素的話可以讓圖片或者是塊元素進行浮動。
參考代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
body{
font-family: '微軟雅黑';
}
.per{
width: 400px;
height: 200px;
border: 1px solid #CCC;
}
.red{
width: 100px;
height: 100px;
background: red;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div class="per">
<div class="red"></div>慕課網是垂直的互聯網IT技能免費學習網站。以獨家視頻教程、在線編程工具、學習計劃、問答社區爲核心特色。在這裏,你可以找到最好的互聯網技術牛人,也可以通過免費的在線公開視頻課程學習國內領先的互聯網IT技術。慕課網課程涵蓋前端開發、PHP、Html5、Android、iOS、Swift等IT前沿技術語言,包括基...
</div>
</body>
</html>
<!-- 如有錯誤,歡迎指正 -->