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设置样式,让他更加美观. 当浏览器读到这个样式表, 他就会按照这个样式来对文档进行 ...
随机推荐
- 记录：使用springboot的cors和vue的axios进行跨域
一.编写一个配置类,并且注册CorsFilter: 注意允许跨域的域名不要写错 @Configuration public class ZysuyuanCorsConfiguration { @Bea ...
- 倍增（在线）求LCA
这几天,提高B组总是有求LCA的题.由于我是蒟蒻,所以老是做不出来,直接上暴力.现在才弄懂. 没耐心看前面部分的大神门可以直接看后面. ST(RMQ)算法(在线)求LCA LCA是什么? 在一棵树上, ...
- 廖雪峰Java14Java操作XML和JSON-2JSON-1Json介绍
JSON是一种类似JavaScript对象的数据表示格式 JavaScript Object Notation 去除了JavaScript的执行语句 仅保留数据 JSON格式: 仅保留UTF-8编码 ...
- 廖雪峰Java14Java操作XML和JSON-1XML-3SAX
SAX:Simple API for XML 基于事件的API import javax.xml.parsers.SAXParser; import javax.xml.parsers.SAXPars ...
- 廖雪峰Java11多线程编程-4线程工具类-1ThreadLocal
多线程是Java实现多任务的基础: Thread ExecutorService ScheduledThreadPool Fork/Join Thread对象代表一个线程:调用Tread.curren ...
- 「题解」：[AHOI2013]作业
问题: 作业 时间限制: 10 Sec 内存限制: 512 MB 题面 题目描述 此时己是凌晨两点,刚刚做了Codeforces的小A掏出了英语试卷.英语作业其实不算多,一个小时刚好可以做完.然后是 ...
- PDO连续query()失败问题
设置了非缓冲查询(PDO::MYSQL_ATTR_USE_BUFFERED_QUERY)以后,连续query会导致下一次结果为false $conn = "mysql:host=127.0. ...
- 19-10-30-Night-V
看到$\text{V}$就想到了V神. 快快放假.... $\text{Vicetone}$最新单曲$\text{Aftermath}$大家听了嘛…… (真不是学数论之后的意思啊,译为‘后果’,显然是 ...
- mysql 主从，双主同步
1.创建用户并设置远程访问授权 1). A上添加: //ip地址为B的ip地址,用于B访问 ' with grant option; 2). B上添加://ip地址为A的ip地址,用于A访问 ' wi ...
- js遍历获取表格内数据方法
1.一般的表格结构如下 <table> <tr> <td>id</td> <td>name</td> </tr> & ...