第九篇 float浮动
float浮动
<div id="div1">我是浮动div</div>
#div1{
background-color: aquamarine;
}
#div1{
background-color: aquamarine;
float: left;
}
#div1{
width: 300px;
}
<div>我是div2,没有任何样式</div>
#div1{
margin:80px 0 0 100px;
}
#div1{
left:100px;
top:80px;
}
#div1{
height: 200px;
}
<div id="div2">我是div2,没有任何样式</div>
#div2{
margin:0 0 0 100px;
}
#div2{
background-color: red;
}
#div2{
float: left;
}
<div id="div3">我是第三个div,我是浮动right</div>
#div3{
float: right;
}
#div3{
margin:0 50px 0 0;
background-color: bisque;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>静态布局</title>
<style>
div{
border: 1px solid red;
margin: 2px;
}
.maindiv{
width: 1440px;
margin: 0 auto;
overflow: hidden;
}
.topcontent{
height: 80px;
background-color: lightcyan;
}
.bottomcontent{
height: 120px;
background-color: lightgoldenrodyellow;
}
.middlecontent{
overflow: hidden;
}
.middlecontent .midleft{
float: left;
min-height: 500px;
width: 160px;
background-color: aqua;
}
.middlecontent .midright{
width: 1260px;
height: 800px;
display: inline-block;
background-color: lightcoral;
}
</style>
</head>
<body> <div class="maindiv">
<div class="topcontent"></div>
<div class="middlecontent">
<div class="midleft"></div>
<div class="midright"></div>
</div>
<div class="bottomcontent"></div>
</div> </body>
</html>
第九篇 float浮动的更多相关文章
- 归纳篇(一)CSS的position定位和float浮动
近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...
- Python之路【第九篇】:Python操作 RabbitMQ、Redis、Memcache、SQLAlchemy
Python之路[第九篇]:Python操作 RabbitMQ.Redis.Memcache.SQLAlchemy Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用 ...
- 对css float 浮动的学习心得
css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...
- [转] CSS float 浮动属性
http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...
- 解剖SQLSERVER 第九篇 OrcaMDF现在能通过系统DMVs显示元数据(译)
解剖SQLSERVER 第九篇 OrcaMDF现在能通过系统DMVs显示元数据(译) http://improve.dk/orcamdf-now-exposes-metadata-through-s ...
- 给li设置float浮动属性之后,无法撑开外层ul的问题。
最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...
- 给li设置float浮动属性之后,无法撑开外层ul的问题。(原址:http://www.cnblogs.com/cielzhao/p/5781462.html)
最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...
- float浮动问题:会造成父级元素高度坍塌;
float浮动问题:会造成父级元素高度坍塌: 解决办法:清除浮动:clear:both; 给父元素高度:height(不是很可取) 给父元素:display:inline-black:(问题:marg ...
- 解决float浮动带来的父元素高度没有的问题---清除浮动
float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...
随机推荐
- Vue Router实现页面跳转拦截
场景: 某些页面需要登录之后才可以访问,在页面跳转前做处理,如果要访问的页面A需要登录,则强制调到登录页,并且记录要访问的页面A的链接,在登录成功后自动跳转到页面A 1.在router下的index. ...
- mysq乱码问题
不乱码的思想 liunx字符集→linux客户端字符集(例如:ssh)→mysql客户端字符集→mysql服务端字符集→库的字符集→表的字符集→程序字符集统一 mysql表跟库,库跟服务端字符集 li ...
- vue 默认展开详情页
{ path: '/Tree', component: Tree, children: [ { path: '/', component: Come } ] }
- DOM解析和SAX解析对比
原理: 一次性加载xml文档,不适合大容量的文件读取 原理: 加载一点,读取一点,处理一点.适合大容量文件的读取 DOM解析可以任意进行增删改成 SAX解析只能读取 DOM解析任意读取任何位置的数据, ...
- JAVA向C传递数据
传递数组 数组是个对象,传递对象就是传递地址,修改地址上的值,数组的内容就会改变 //获取数组首地址 int* p = (*env)->GetIntArrayElements(env, arra ...
- 给定一个字符串,把字符串内的字母转换成该字母的下一个字母,a换成b,z换成a,Z换成A,如aBf转换成bCg, 字符串内的其他字符不改变,给定函数,编写函数 void Stringchang(const char*input,char*output)其中input是输入字符串,output是输出字符串
import java.util.Scanner; /*** * 1. 给定一个字符串,把字符串内的字母转换成该字母的下一个字母,a换成b,z换成a,Z换成A,如aBf转换成bCg, 字符串内的其他字 ...
- Activity缓存方法
有a.b两个Activity,当从a进入b之后一段时间,可能系统会把a回收,这时候按back,执行的不是a的onRestart而是onCreate方法,a被重新创建一次,这是a中的临时数据和状态可能就 ...
- 小米监控--Open-Falcon
#安装下载软件yum -y install wget #更换aliyun源mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Ba ...
- 谷歌云服务器XShell登录
一,谷歌云服务器,默认用浏览器进行SSH链接,而且也不告知密码.以Centos为例,先使用浏览器连接 1,给root修改密码 sudo passwd root 2,编辑ssh配置文件 sudo nan ...
- debian中安装gcc make
ubuntu debian 可以直接 apt-get install gcc automake autoconf libtool make