首页 > 代码库 > CSS float
CSS float
pytharm中快速写4个div ： div.div1*4 Tab
演示代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>FloatTest</title> <style> .div1{ text-align: center; line-height: 50px; width: 30px; height: 50px; background-color: #2aabd2; float: left; } .div2{ text-align: center; line-height: 50px; width: 40px; height:50px; background-color: #8a6d3b; float: left; } .div3{ text-align: center; line-height: 50px; width: 50px; height:60px; background-color: #b92c28; } .div4{ text-align: center; line-height: 50px; width: 100px; height:70px; background-color: #e90592; } </style></head><body><div class="div1">1</div><div class="div2">2</div><div class="div3">3</div><div class="div4">4</div></body></html>
给div1跟div2添加float:left
给div3,div4添加float: left;并且让3 4在第二行，需要给3清楚浮动 clear: both;
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>FloatTest</title> <style> .div1{ text-align: center; line-height: 50px; width: 30px; height: 50px; background-color: #2aabd2; float: left; } .div2{ text-align: center; line-height: 50px; width: 40px; height:50px; background-color: #8a6d3b; float: left; } .div3{ text-align: center; line-height: 50px; width: 50px; height:60px; background-color: #b92c28; float: left; clear: both; } .div4{ text-align: center; line-height: 50px; width: 100px; height:70px; background-color: #e90592; float: left; } </style></head><body><div class="div1">1</div><div class="div2">2</div><div class="div3">3</div><div class="div4">4</div></body></html>
CSS float
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。