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

一 利用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. HDU ACM 1496 Equations

    Equations Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  2. 在Windows上，如何卸载RabbitMQ服务

    打开运行->CMD->sc delete RabbitMQ 如果报错..... 打开运行->regedit 找到RabbitMQ节点,删掉即可.(右侧看到的都是启动服务时,需要的配置 ...

  3. TreeMap实现原理

    摘要 研究项目底层代码时,发现项目中的数据的缓存用的是TreeMap来实现对数据的缓存管理.本片博文就TreeMap的源码.原理以及用法做一个探究 在用TreeMap之前我们要对TreeMap有个整体 ...

  4. 10个专属于移动app开发者的最佳移动JavaScript框架

    1.Titanium Mobile JavaScript Frameworks Titanium Mobile JavaScript框架是移动应用开发者(Android & iOS)首选的最优 ...

  5. JodaTime用法简介

    JodaTime用法简介 Java的Date和Calendar用起来简直就是灾难,跟C#的DateTime差距太明显了,幸好有JodaTime 本文简单罗列JodaTime的用法 package co ...

  6. 条件编译#ifdef的妙用详解_透彻

    这几个宏是为了进行条件编译.一般情况下,源程序中所有的行都参加编译.但是有时希望对其中一部分内容只在满足一定条件才进行编译,也就是对一部 分内容指定编译的条件,这就是“条件编译”.有时,希望当满足某条 ...

  7. Quality Center11初始化失败

    打开start_a.jsp页面总是闪退,原因如下: 初始化失败因为证书签名过期了.把IE选项里证书检查的三项勾掉就好了(检查发行商的证书是否吊销.检查服务器证书吊销.检查已下载的程序的签名)

  8. opencv 模板匹配与滑动窗口（单匹配） (多匹配)

    1单匹配: 测试图片:   code: #include <opencv\cv.h> #include <opencv\highgui.h> #include <open ...

  9. java 2 8 10 16

    An integer literal may be expressed in decimal (base 10), hexadecimal (base 16), octal (base 8), or ...

  10. JEECMS-自定义标签[list]

    1.自定义标签类 import static cn.com.yhxl.common.web.freemarker.DirectiveUtils.OUT_LIST; import static free ...