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. 线性反馈移位寄存器（LFSR）-非线性反馈移位寄存器的verilog实现（产生伪随机数）

    一.线性反馈移位寄存器(LFSR) 通过对事先选定的种子做运算使得人工生成的伪随机序列的过程,在实际中,随机种子的选择决定了输出的伪随机序列的不同,也就是说随机种子的选择至关重要. 产生伪随机数的方法 ...

  2. 吴裕雄--天生自然python学习笔记：python安装配置tesseract-ocr-setup-3.05.00dev.exe

    下载地址:https://digi.bib.uni-mannheim.de/tesseract/tesseract-ocr-setup-3.05.00dev.exe 点击安装,记得复制安装的路径,待会 ...

  3. djangp-filter的使用

    目录 Filter定义 Filter定义 定义如下Filter类 class BookFilter(django_filters.FilterSet): name = django_filters.C ...

  4. 因为AI，所以爱

    作为技术驱动型公司 自我颠覆的核心就是技术上有所突破 2019技术奇点大会上,创始人行在提出 「未来,大数据和人工智能 将成为商业升级的智能发动机」 这与我们的使命不谋而合 时间退回到2016年的冬天 ...

  5. HTML常用数据类型

    .数学函数: Math.ceil():天花板数 //大于当前小数的最小整数 Math.floor():地板数 //小于当前小数的最大整数 Math.round():四舍五入取整数 Math.rando ...

  6. 科技报告|AD报告|DTIC|PB报告|STAR|ERA|NTIS|DTIC|DOE|EPA|NASA |JPL|

    信息检索-科技报告是灰色文献获取渠道有限. 技术论文中因保密需要,会删除关键性技术. AD报告也产生较早,1951年开始出版.现由美国国防技术情报中心(DTIC:Defence Technical I ...

  7. HTTP-web服务器接收到client请求后的处理过程（很详细）

    1. 客户发起情况到服务器网卡: 2. 服务器网卡接受到请求后转交给内核处理: 3. 内核根据请求对应的套接字,将请求交给工作在用户空间的Web服务器进程 4. Web服务器进程根据用户请求,向内核进 ...

  8. JavaWeb防注入知识点（一）

    一.防sql注入办法 在apache commons-lang(2.3以上版本)中为我们提供了一个方便做转义的工具类,主要是为了防止sql注入,xss注入攻击的功能.总共提供了以下几个方法: 1.es ...

  9. https协议 和 Charles 进行https抓包原理

    本文转载自:https://blog.csdn.net/fox64194167/article/details/80387696 1.对称加密 其变成复杂的加密密文发送出去.收信方收到密文后,若想解读 ...

  10. gitlab两种连接方式:ssh和http对比

    共同点: 都可以使用git clone 地址 .将项目下载到本地. 不同点: 当将本地修改上传到远程服务器时,http需要输入用户名密码,ssh. 1.ssh方式: 这是一种相对安全的方式这要求将本地 ...