在写一个移动端网页，发现网页的头部搜索框两边各有固定宽度的按钮，搜索框可以根据宽度的变化来改变自己的宽度，达到填充的目的，也就是一种自适应吧，下面写写自己尝试的几种方法

一 利用css3 的width：calc（100% - npx）；

<body>

    <div style="border: 1px solid black;width: 100%;height: 100px">

        <div class="div1" style="float: left;height: 50px;width: 100px;background: red"></div>

        <div class="div2" style="float: left;height: 50px;width:calc(100% - 120px);background: yellow"></div>

    </div>

</body>

注意  width:calc(100% - 120px); 两边都有空格，不要问我为什么会知道。。。

二 利用display:table和display:table-cell；

<body>

    <div class="box"  style="border: 1px solid black;width: 100%;height: 100px;display: table">

        <li class="left" style="background: red;display: block;width: 100px;height: 100px;"></li>

        <li class="right" style="background: deepskyblue;display: table-cell;width: 100%"></li>

    </div>

</body>

display:table 这个属性很少用，display:table-cell可以自适应宽度，这点倒是挺好的。

三 利用position:absolute；

<body>

    <div style="height: 100px;width: 100%;border: 1px solid red">

        <span style="display: block;float: left;height: 100px;width: 100px;background: green"></span>

        <span style="display: block;float: left;height: 100px;position: absolute;left: 100px;right: 100px;background: yellow"></span>

        <span style="display: block;float:right;height: 100px;width: 100px;"></span>

    </div>

</body>

利用position:absolute；不固定宽度，设置高度，然后将左右定位为预留的位置，然后就会自适应屏幕宽度了。

四 关于上下自适应

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body >

<div style="position: absolute;top: 0;bottom: 0;width: 100%;border: 1px solid black">

    <div class="header" style="height: 100px;background: red"></div>

    <div class="mid" style="height:calc(100% - 200px);background: yellow"></div>

    <div class="footer" style="height: 100px;background: green"></div>

</div>

</body>

</html>

这个就是利用position:absolute；上下都定位到边上，就会自适应了。。

CSS 实现行内和上下自适应的几种方法的更多相关文章

  1. css实现左边定宽右边自适应的5种方法总汇

    在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...

  2. CSS设置行内元素和块级元素的水平居中、垂直居中

    CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...

  3. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  4. Css三栏布局自适应实现几种方法

    Css三栏布局自适应实现几种方法 自适应实现方法我们可以从三个方法来做,一个是绝对定位 ,自身浮动法 和margin负值法了,下面我们一起来看看这三个例子吧,希望例子能帮助到各位同学. 绝对定位法三栏 ...

  5. CSS两列布局——左侧宽度固定，右侧宽度自适应的3种方法

    1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  6. 假设高度已知，请写出三栏布局，其中左栏、右栏各为300px，中间自适应的五种方法

    假设高度已知,请写出三栏布局,其中左栏.右栏各为300px,中间自适应的五种方法 HTML CSS 页面布局 题目:假设高度已知,请写出三栏布局,其中左栏.右栏各为300px,中间自适应 <!D ...

  7. 实现三个div，固定左右两边的div宽为200，中间的div宽度自适应的四种方法

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

  8. 行内脚本的位置放置----css阻塞行内脚本

    行内脚本:避免放置在css和其他资源之间. 若在head中,最好放在css样式表之前,如果放置在样式表之后,会引起css阻塞. css阻塞:由于浏览器要保证css和JavaScript的执行顺序,cs ...

  9. css实现行内文字垂直居中

    之前本人一直使用浮动.相对定位.绝对定位和display:table等css的方法进行定位.网上得知flex可实现弹性布局,符合未来发展趋势,随尝试. 1:让盒子行内文字垂直居中,解决思路是讲文字的行 ...

随机推荐

  1. php 正则表达

    今天看书,看到代码里面出现了一段正则表达式匹配语句preg_match,感觉水很深的感觉,网上搜了一些资料,暂时没时间学习,但是觉得以后学的话有两个网址比较靠谱,如下: php正则表达式手册:php ...

  2. SSHFS

    SSHFS(SSH文件系统) 是一个文件系统客户端程序,使用它可以将远程服务器上的目录挂载在本地直接访问 可以在网站http://igikorn.com/sshfs-windows-8/内下载

  3. 视频资源下载方法[download video resources]

    笔者做视频时钟分析,需要用到大量特殊的视频,如何获取需要的视频是一个问题? 以下载NBA视频为例: Tools:①腾讯视频软件 (自行下载)  ②批处理文件(下文会给出代码) convert.bat ...

  4. homework-05 GoldNumberServer

    作业要求 这次作业要求实现一个黄金数游戏服务器,游戏流程如下,每个client向服务器提交一个有理数,服务器接收到所有客户端的提交后计算这些数字的平均数,再将其乘以黄金分割得到一个GoldNumber ...

  5. UVA 315 315 - Network（求割点个数）

     Network  A Telephone Line Company (TLC) is establishing a new telephone cable network. They are con ...

  6. 分析nginx access log日志的命令

    统计访问最多的ip 1. tail -n 10000 xxaccess_log | cut -d " " -f 1 |sort|uniq -c|sort -rn|head -10 ...

  7. Codeforces Round #149 (Div. 2) E. XOR on Segment (线段树成段更新+二进制)

    题目链接:http://codeforces.com/problemset/problem/242/E 给你n个数,m个操作,操作1是查询l到r之间的和,操作2是将l到r之间的每个数xor与x. 这题 ...

  8. Spring Data Solr教程（翻译）

    大多数应用都必须具有某种搜索功能,问题是搜索功能往往是巨大的资源消耗并且它们由于沉重的数据库加载而拖垮你的应用的性能 这就是为什么转移负载到一个外部的搜索服务器是一个不错的主意,Apache Solr ...

  9. 深入学习APC

    一.前言 在NT中,有两种类型的APCs:用户模式和内核模式.用户APCs运行在用户模式下目标线程当前上下文中,并且需要从目标线程得到许可来运行.特别是,用户模式的APCs需要目标线程处在alerta ...

  10. Lua学习笔记（一）：搭建开发环境

    Lua是一个小巧高效的解释型脚本语言,可以方便的嵌入到任意的语言中,很多应用程序.游戏使用LUA作为自己的嵌入式脚本语言,以此来实现可配置性.可扩展性.这其中包括魔兽世界.博德之门.愤怒的小鸟.VOC ...