CSS+DIV自适应布局
CSS+DIV自适应布局
1.两列布局（左右两侧，左侧固定宽度200px;右侧自适应占满）
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>左右两侧，左侧固定宽度200px;右侧自适应占满</title>
<style>
.box{
width:800px;
height:300px;
margin:0 auto;
}
.left{
width:200px;
height:300px;
background:#f00;
float:left;
}
.right{
height:300px;
margin-left:200px;
background:#0f0;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>运行结果如下图：
- 两栏布局（左定宽，右自动）
- float + margin
2.三列布局（左中右三列，左右200px固定，中间自适应占满）
方法一（左右浮动，中间 margin-left,margin-right，中间div在最后）
- 代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>左中右三列，左右200px固定，中间自适应占满 方法一</title>
<style>
.box{
width:800px;
height:300px;
margin:0 auto;
}
.left{
width:200px;
height:300px;
background:#f00;
float:left;
}
.right{
width:200px;
height:300px;
float:right;
background:#0f0;
}
.center{
height:300px;
background-color:#00f;
margin:0 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
</html>- 运行结果如下图
方法二(左中右定位)：
- 代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>左中右三列，左右200px固定，中间自适应占满 方法二</title>
<style>
.box{
width:1000px;
height:300px;
margin:0 auto;
position:relative;
}
.left{
width:200px;
height:300px;
background:#f00;
position:absolute;
top:0px;
left:0px;
}
.right{
width:200px;
height:300px;
background:#0f0;
position:absolute;
top:0px;
right:0px;
}
.center{
height:300px;
background-color:#00f;
position:absolute;
left:200px;
right:200px;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
- 运行结果如下图：
3.上中下三行，头部，底部固定高200px，中间自适应占满
中间定位，底部定位
- 代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>上中下三行，头部，底部固定高200px，中间自适应占满</title>
<style>
*{
margin:0;
}
html{
height:100%;
}
body{
min-height:100%;
}
.header{
width:100%;
height:100px;
background-color:#ccc;
}
.main{
width:100%;
background-color:#f00;
position:absolute;
top:100px;
bottom:100px;
}
.footer{
height:100px;
width:100%;
position:absolute;
bottom:0px;
background-color:#ccc;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>
- 运行代码如下图：
4.上下两部分，地下这个股东高度200px,如果上面的内容少，那么这个footer就固定在底部，如果内容多，就把footer往下挤
- 代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>上下两部分，地下这个股东高度200px,如果上面的内容少，
那么这个footer就固定在底部，如果内容多，就把footer往下挤</title>
<style>
*{
margin:0;
}
html{
height:100%;
}
body{
min-height:100%;
background-color:#00f;
position:relative;
}
.header{
height:100%;
background-color:#00f;
padding-bottom:200px;
}
.footer{
width:100%;
height:200px;
position:absolute;
bottom:0px;
background-color:#0ff;
}
</style>
</head>
<body>
<div class="header">
sdsadas<br/>
sdsadas<br/>
sdsadas<br/>
sdsadas
sdsadas<br/>
sdsadas<br/>
sdsadas<br/>
sdsadas<br/>
sdsadas<br/>
sdsadas<br/>
sdsadas<br/>
sdsadas<br/>
sdsadas<br/>
</div>
<div class="footer"></div>
</body>
</html>- 运行结果如下图：
新手入门，请多多关照
CSS+DIV自适应布局的更多相关文章
- 演示：纯CSS实现自适应布局表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- CSS流体(自适应)布局下宽度分离原则
CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...
- 常见css垂直自适应布局（css解决方法）
css3的盒模型, css3中添加弹性盒模型,最新弹性盒模型是flex,之前为box <!DOCTYPE html> <html > <head> <titl ...
- 常见css水平自适应布局
左右布局,左边固定,右边自适应布局 BFC方法解决 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- CSS流体(自适应)布局下宽度分离原则——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1463 一.简短的前言 ...
- css+div页面布局
div标签是html页面中用于分组的块元素,是专门用于元素布局的标签. 标签的级别: 1.行级标签:可设置大小,但一行只能容下一个行级标签(默认宽度==页面宽度,默认高度==填充高度) 2.块级标签: ...
- CSS之自适应布局webkit-box
自适应布局webkit-box,在平常的web横排布局中,会经常用到float或display:inline-block,但是在多种不同宽度的移动设备的自适应布局中用的话,还得设置百分比宽度和考虑清除 ...
- 一个简单的模板了解css+div网页布局
直接附上最终效果图: index.html内容: <html> <!--20170730 soulsjie--> <head> <meta http-equi ...
- div自适应布局
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OnlineShowPage ...
随机推荐
- 八、linux-mysql的mysql主从复制原理和实战
1.mysql主从复制介绍 mysql支持单向.双向.链式级联.实时.异步复制,在复制过程中,一台服务器充当主服务器(Master),而一个或多个其它服务器充当从服务器(Slave). 复制:单向同步 ...
- svn http
yum install -y httpd subversion mod_dav_svn mkdir -p /var/lib/svn cd /var/lib/svn svnadmin create de ...
- 树分治（挑战p360）
poj1741 题:http://poj.org/problem?id=1741 #include<iostream> #include<algorithm> #include ...
- 自定义控件 监控宿主activity的生命周期
使用不显示的fragment来监控activity生命周期,fragment生命周期基本上跟随宿主activity变化.我们通过fragment的生命周期就可以知到activity的生命周期 我们自定 ...
- 国内外主流的三维GIS软件
我国GIS经过三十多年的发展,理论和技术日趋成熟,在传统二维GIS已不能满足应用需求的情况下,三维GIS应运而生,并成为GIS的重要发展方向之一.上世纪八十年代末以来,空间信息三维可视化技术成为业界研 ...
- Python-scapy学习
scapy-arpspoof from scapy.all import Ether,ARP,sendp,getmacbyip Ether:用来构建以太网数据包 ARP:构建ARP数据包的类 send ...
- [LC] 240. Search a 2D Matrix II
Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...
- mapreduce.shuffle set in yarn.nodemanager.aux-services is invalid
15/07/01 20:14:41 FATAL containermanager.AuxServices: Failed to initialize mapreduce.shuffle java.la ...
- python 3新式类的多继承
因为我用的是python3,所以所用到的类都是新式类,这里我说的都是新式类,python2类的继承复杂一些,主要有新式类和老式类.python3类(新式类)的继承是是广度优先(BFS),实例如下: c ...
- java的自增和自减
class Untitled { public static void main(String[] args) { int a = 3; int b = a++; //a先赋值给b,然后a再自己加1 ...