float示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0px;
padding:0px;
}
#container{
width:650px;
background-color: gray;
color:black;
}
div{
width:100px;
text-align: center;
float:left;
}
#div1{
height:600px;
background-color: red;
}
#div2{
height:200px;
background-color: aqua; }
#div3{
height:400px;
background-color: #ece023;
}
#div4{
height:300px;
background-color: chartreuse;
}
#div5{
height:100px;
background-color: fuchsia;
}
#div6{
height:50px;
background-color: lightgreen;
}
#div7{
height:150px;
background-color: midnightblue;
}
#div8{
height:450px;
background-color: purple;
}
#div9{
height:300px;
background-color: lightgreen;
}
#div10{
width:200px;
height:50px;
background-color: darkred;
}
</style>
</head>
<body>
<div id="container">
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>
<div id="div6">div6</div>
<div id="div7">div7</div>
<div id="div8">div8</div>
<div id="div9">div9</div>
<div id="div10">div10</div>
</div> </body>
</html>
float示例的更多相关文章
- CSS 解决Float后塌陷问题
当父级元素没有设定高度时候,而子集元素设定float类型时候,此时父级元素不能靠子集元素撑起来,所以就形成了塌陷: 示例分析 **1.Float之前的效果** <!DOCTYPE html> ...
- sql server中常用方法函数
SQL SERVER常用函数 1.DATEADD在向指定日期加上一段时间的基础上,返回新的 datetime 值. (1)语法: DATEADD ( datepart , number, date ) ...
- C++学习笔记（八）：函数重载、函数指针和函数对象
函数重载 函数重载是指在同一作用域内,可以有一组具有相同函数名,不同参数列表的函数,这组函数被称为重载函数.重载函数通常用来命名一组功能相似的函数,这样做减少了函数名的数量,避免了名字空间的污染,对于 ...
- js实现省市区联动
先来看看效果图吧,嘻嘻~~~~~~~~~~~~~~~~~~~· 代码在下面: 示例一: html: <!DOCTYPE html> <html> <head> &l ...
- 前端之CSS内容
一.CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). 二.CSS语法 1 ...
- 前端css
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...
- python网络进阶篇
并发编程 进程 操作系统的历史 # 手工操作 —— 穿孔卡片 # 程序员将对应于程序和数据的已穿孔的纸带(或卡片)装入输入机,然后启动输入机把程序和数据输入计算机内存,接着通过控制台开关启动程序针对数 ...
- ruby-操作mysql
ruby操作mysql数据库 以centos7.2为实验环境 Table of Contents 使用DBI访问Mysql 使用Mysql2访问Mysql DBI 安装DBI驱动 很多同学在公司是没有 ...
- python之路--前端CSS
一.CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义了如何显示HTML元素,给HTML设置样式,让他更加美观. 当浏览器读到这个样式表, 他就会按照这个样式来对文档进行 ...
随机推荐
- 华为手机honor5c root 方法备份
1.首先获取官方解锁码: https://www.emui.com/cn/unlock_detail 2.用 adb 执行 root 命令,如下: 498 adb devies 499 adb d ...
- Android开发 WebView的详解
前言 WebView 是Android显示html内容的主要方式,当然TextView也可以加载html内容.但是WebView除了功能更加强大,最重要的是还能调用Html里的JavaScript语言 ...
- B/S架构及其运行原理
一. B/S的概念 B/S(Brower/Server,浏览器/服务器)模式又称B/S结构,是Web兴起后的一种网络结构模式.Web浏览器是客户端最主要的应用软件. 这种模式统一了客户端,将系统功能实 ...
- 模板——tarjan求割点
在一个无向图中,如果有一个顶点集合,删除这个顶点集合以及这个集合中所有顶点相关联的边以后,图的连通分量增多,就称这个点集为割点集合. 注意求割点中的low定义: 割点中low[u]记录节点u或u的子树 ...
- <scrapy爬虫>基本知识-修改链接-中间件
rules = ( Rule(LinkExtractor(allow=r'/films/\d+'),process_links='deal_links' ,callback='parse_maoyan ...
- 跟我一起学koa之在koa中使用mongoose（四）
第一步安装mongoose,创建数据库文件夹 第二步引入mongoose,连接数据库 第三步运行项目 这个报错 只需要将es6写法变成es5写法即可 我们连接数据库,并且以post请求的方式插入数据 ...
- redis消息队列先进先出需要注意什么?
通常使用一个list来实现队列操作,这样有一个小限制,所以的任务统一都是先进先出,如果想优先处理某个任务就不太好处理了,这就需要让队列有优先级的概念,我们就可以优先处理高级别的任务,实现方式有以下几种 ...
- php对输入的检测
$data['value'] = trim(stripslashes(htmlspecialchars_decode($value)));
- Linux 命令之head, tail, tr, sort, uniq, grep
head [filename] head -n 11 [filename] -> First 11 lines head -c 20 [filename] -> First 20 char ...
- PAT甲级——A1057 Stack
Stack is one of the most fundamental data structures, which is based on the principle of Last In Fir ...