css笔记19:浮动的案例
2024-08-26 10:19:19
案例一:
1. 首先是01.html文件:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="01.css" />
</head> <body>
<div class="div1">
<div class="div2 special_div">1div</div>
<div class="div2">2div</div>
<div class="div2">3div</div>
<div class="div2">4div</div>
<div class="div2">5div</div>
<div class="div2">6div</div>
</div>
</body>
</html>
2. 然后01.css文件:
@charset "utf-8";
/* CSS Document */ .div1 {
width:800px;
height:800px;
border: 1px solid pink;
} .div2 {
width:150px;
height:100px;
border:1px solid blue;
background-color:pink;
margin-top:5px;
margin-left:5px;
text-align: center;
float:left;/*左浮动:指让该元素尽量向左边移动,让出自己右边的空间,给下一个元素*/
} .special_div {
height:120px;
}
效果图:
总结:
浮动是一个重要的概念,分为左浮动、右浮动和清除浮动。
特别注意:如果一行宽度不够排下所有的div,则会自动换行;当然如果有某个div过大,则会卡住别的div,如上图会后移
案例二:
1.首先是01.html文件:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="01.css" />
</head> <body>
<div class="div1">
<div id="div3" class="div2">1div</div>
<div class="div2">2div</div>
<div class="div2">3div</div>
</div>
</body>
</html>
2.然后是01.css文件:
@charset "utf-8";
/* CSS Document */ .div1 {
width:800px;
height:800px;
border: 1px solid pink;
} .div2 {
width:150px;
height:100px;
border:1px solid blue;
background-color:pink;
margin-top:5px;
margin-left:5px; text-align: center;
} #div3 {
float:right;/*右浮动:让该元素尽量向右移动,直到碰到他的父元素的右边界*/
}
效果图:
最新文章
- ABAP游标的使用
- Android SDK升级后报错error when loading the sdk 发现了元素 d:skin 开头无效内容
- SharePoint 2013 JavaScript 对象判断用户权限
- Java锁 到底锁的是哪个对象?
- Python在安装第三方模块遇到的问题及解决办法
- 对象(类)的封装方式(面向对象的js基本知识)
- Linq 用法笔记
- ruby eclipse调试
- How to delete a large number of data in SharePoint for List when refreshing data?
- delphiXE调用Objective-c库
- graph driver-device mapper-01driver初始化
- S2SH框架整合(注解)Struts2+Spring+Hibernate+MySql
- [转载] MapReduce工作原理讲解
- C语言程序设计第三次作业--选择结构(1)
- WebDriverAgent入门篇-安装和使用
- redis整合Spring集群搭建及业务中的使用
- ArcGIS自定义脚本-通过txt/excel/dbf/table生成多边形要素类
- org.apache.ibatis.binding.BindingException: Parameter &#39;idList&#39; not found解决办法
- CSOM中如何取到managed metadata类型字段的类型信息
- spring Ioc 实践