第九篇 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-的版本下很多问题,因为它是 ...
随机推荐
- pandas之时间序列(data_range)、重采样(resample)、重组时间序列(PeriodIndex)
1.data_range生成时间范围 a) pd.date_range(start=None, end=None, periods=None, freq='D') start和end以及freq配合能 ...
- layui 数据表格复选框实现单选功能
//点击选中(单选)//单击行勾选checkbox事件 $(document).on("click",".layui-table-body table.layui-tab ...
- [笔记] 使用otunnel从外网访问内网
需求 内网机器没有公网IP,但是可以访问外网,现在需要从外网访问内网机器. 举例,在家里机器A访问公司内网机器B. 前提 需要一台有公网IP的服务器S做中转,这样就可以打通AB两端了. A <- ...
- 几种排序算法及Java实现排序的几种方式
几种排序算法 下面的例子介绍了4种排序方法: 冒泡排序, 选择排序, 插入排序, 快速排序 package date201709.date20170915; public class SortUtil ...
- 002. Add Two Numbers
题目链接:https://leetcode.com/problems/add-two-numbers/description/ Example: Input: (2 -> 4 -> 3) ...
- JavaScript基础入门04
目录 JavaScript 基础入门04 JavaScript 对象 介绍 关于键名 对象的引用 语句和表达式需要注意的地方 对象属性常见的操作 with语句 JSON 特点 语法规则 JSON合法示 ...
- 3-2 LInux文件管理
LInux文件管理 文件系统目录结构 Linux中目录结构是有一定的约定的FHS /bin:存放二进制程序 /boot:启动相关 /dev:设备文件 /etc:配置文件 /home:用户家目录 /li ...
- 【VS开发】【DSP开发】TCP和UDP数据包结构
TCP (Transport Control Protocol)传输控制协议: 1.TCP数据包的分组格式: A,源端口:标识源端应用进程. B, 目的端口:标识目的端应用进程. C, 序号:在SYN ...
- EditText inputType类型整理
//文本类型,多为大写.小写和数字符号. android:inputType="none"//输入普通字符 android:inputType="text& ...
- zabbix监控ssl证书过期时间
获取证书过期时间脚本: /etc/zabbix/scripts/check-cert-expire.sh: #!/bin/bash host=$ port=$ end_date=`/usr/bin/o ...