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

一 利用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. C字符串和C++中string的区别 &amp;&amp;&amp;&amp;C++中int型与string型互相转换

    在C++中则把字符串封装成了一种数据类型string,可以直接声明变量并进行赋值等字符串操作.以下是C字符串和C++中string的区别:   C字符串 string对象(C++) 所需的头文件名称 ...

  2. Android自定义TTF字体

    前言: 在Android Design中一个设计手册.在设计手册中有常用的UI图标,图标大小规范等. 其中,有一个TTF字体,以前感觉没什么用.但是我在学习时,常看到有许多开发者使用Google 提供 ...

  3. Java in ACM/ICPC

    目录 Java在ACM/ICPC中的特点 在ACM/ICPC中使用Java需要注意的问题 Java与高精度计算 1.Java在ACM/ICPC中的特点 Java的语法和C++几乎相同 Java在执行计 ...

  4. [JLOI2013]地形生成

    JLOI2013过了好长时间,才写第四题.. 第一问比较好想. 第二问我想到了n^3次方的做法,但是数据....于是没敢写,然后上网查了一下题解,居然是O(n^3)过的,数据这么弱... /* * P ...

  5. 报表服务框架：WEB前端UI

    1.Highcharts 2.ECharts 3.ichartjs 参考: http://v1.hcharts.cn/index.php http://echarts.baidu.com/ http: ...

  6. java commons-lang 工具包 逃脱工具 转unicode 及其他

    <dependency> <groupId>commons-lang</groupId> <artifactId>commons-lang</ar ...

  7. http请求中乱码------编码的转换

    在http请求中如果包含了汉字,那么就会出现乱码,引文默认的编码是ISO的,为了正常的显示,需要将编码转化为UTF或者gbk,下面提供一个辅助类. import java.io.Unsupported ...

  8. Thinkphp框架----微信公众测试号开发(2)

    ---恢复内容开始--- 最近忙着投简历找工作.现在继续更 微信回复图文设置. 效果: 页面HTML需要一个form表单 简单效果: 接下来是数据库 字段:id title(标题) text(描述) ...

  9. 音频视频播放（jquery中将jquery方法转化成js方法）

    在jQuery中没有音频视频直接播放的方法,我们在写音频视频时,应该将jquery的方法转化为js方法:play():pause() 补充:   将jq对象转化成js对象写法: var music=$ ...

  10. 怎么修改电脑MAC地址 电脑MAC地址修改图文教程

    本文转载:http://www.45fan.com/a/Router/2677.html MAC地址是指电脑网卡的硬件地址,此地址一般烧录在网卡上.MAC地址工作在OSI七层模型的第二层,即数据链接层 ...