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

一 利用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. 我的web前端修炼之路从此开始

    看过一篇文章,上面说过要想学习一门新技术,从什么时候开始都是不晚的.但对于一名大四的学生,只会一点简单的网页架构,只懂得HTML,CSS,JavaScript简单的一点皮毛,却怎么也说不过去.但也是这 ...

  2. ehcache 的配置

    配置:一.在src目录下加入ehcache.xml: <cache name="SimplePageCachingFilter" maxElementsInMemory=&q ...

  3. linux - 怎么自动填写有交互的shell脚本 - SegmentFault

    linux - 怎么自动填写有交互的shell脚本 - SegmentFault TCL/Expect交互式自动化测试概要 - - ITeye技术网站 expect是一种基于TCL,能与交互式程序进行 ...

  4. c函数调用过程原理及函数栈帧分析

    转载自地址:http://blog.csdn.net/zsy2020314/article/details/9429707       今天突然想分析一下函数在相互调用过程中栈帧的变化,还是想尽量以比 ...

  5. 注意 sizeof 中不要有复杂运算操作

    http://github.tiankonguse.com/blog/2014/12/05/c-base/ 一个比较有意思的问题 #include<stdio.h> ; int f() { ...

  6. iOS学习之自动布局

    Autolayout: 最重要的两个概念: 约束:对控件位置和大小的限定条件 参照:对控件设置的约束是相对于哪一个视图而言的 自动布局的核心计算公式: obj1.property1 =(obj2.pr ...

  7. JSF 2 radio buttons example

    In JSF, "h:selectOneRadio" tag is used to render a set of HTML input element of type " ...

  8. POJ1179Polygon(DP)

    Polygon Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 4456   Accepted: 1856 Descripti ...

  9. SQL Select count(*)和Count（1）的区别和执行方式及SQL性能优化

    SQL性能优化:http://www.cnblogs.com/CareySon/category/360333.html Select count(*)和Count(1)的区别和执行方式 在SQL S ...

  10. GMT 绘制台站分布图

    set ps=test.psset J=M4i set R=73/135.5/10/54rem gmt gmtset  FONT_ANNOT_PRIMARY 8p FONT_TITLE 8p  gmt ...