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自适应布局的更多相关文章

  1. 演示:纯CSS实现自适应布局表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. CSS流体(自适应)布局下宽度分离原则

    CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...

  3. 常见css垂直自适应布局(css解决方法)

    css3的盒模型, css3中添加弹性盒模型,最新弹性盒模型是flex,之前为box <!DOCTYPE html> <html > <head> <titl ...

  4. 常见css水平自适应布局

    左右布局,左边固定,右边自适应布局 BFC方法解决 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  5. CSS流体(自适应)布局下宽度分离原则——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1463 一.简短的前言 ...

  6. css+div页面布局

    div标签是html页面中用于分组的块元素,是专门用于元素布局的标签. 标签的级别: 1.行级标签:可设置大小,但一行只能容下一个行级标签(默认宽度==页面宽度,默认高度==填充高度) 2.块级标签: ...

  7. CSS之自适应布局webkit-box

    自适应布局webkit-box,在平常的web横排布局中,会经常用到float或display:inline-block,但是在多种不同宽度的移动设备的自适应布局中用的话,还得设置百分比宽度和考虑清除 ...

  8. 一个简单的模板了解css+div网页布局

    直接附上最终效果图: index.html内容: <html> <!--20170730 soulsjie--> <head> <meta http-equi ...

  9. div自适应布局

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="OnlineShowPage ...

随机推荐

  1. mui折叠面板的使用

    折叠面板从二级列表中演化而来,dom结构和二级列表类似,如下: <div class="mui-content"> <div class="mui-ca ...

  2. Miller-Rabin素数检测算法

    遇到了一个题: Description: Goldbach's conjecture is one of the oldest and best-known unsolved problems in ...

  3. python en(de)code

    python爬虫 代码写挺长的,也是边学边写,但一直搞不清楚python的encode(编码)和decode(解码).以下是我的探究之路. 一.当然先看官方文档 地址如下 里面提到encode函数'R ...

  4. WebSecurityConfig

    package me.zhengjie.core.config; import me.zhengjie.core.security.JwtAuthenticationEntryPoint; impor ...

  5. 在python的web框架Django中使用SQL Server

    在pycharm中安装 安装pyodbc和Django——pyodbc是一个用python写的ODBC引擎 安装Django-pyodbc-azure                  在后方网址中查 ...

  6. cs231n spring 2017 lecture11 Detection and Segmentation

    1. Semantic Segmentation 把每个像素分类到某个语义. 为了减少运算量,会先降采样再升采样.降采样一般用池化层,升采样有各种“Unpooling”.“Transpose Conv ...

  7. 第一课 安装wamp环境

    1.准备 怎样选择PHP的版本 IIS 如果想使用IIS配置PHP的话,那么需要选择Non-Thread Safe(NTS)版本的PHP Apache 如果你是用的Apache的版本来自Apache ...

  8. SQL中的子查询

    目录 WHERE子查询 HAVING子查询 FROM子查询 SELECT子查询 EXISIT子查询 查询薪资排名的员工信息(面试) z子查询就是将一个查询(子查询)的结果作为另一个查询(主查询)的数据 ...

  9. java 面向对象 购物车

    一个商城包括多个商品.多个用户.拥有销售商品.展示商品和查找商品功能.2)    一个用户拥有一个购物车,购物车具有结算功能.3)    商城具有名称,静态字符串类型4)    用户类是抽象类,两个子 ...

  10. 剖析String,StringBuffer,StringBuilder异同

    近在学习Java的时候,遇到了这样一个问题,就是String,StringBuilder以及StringBuffer这三个类之间有什么区别呢,自己从网上搜索了一些资料,有所了解了之后在这里整理一下,便 ...