博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS 实现行内和上下自适应的几种方法
阅读量:5157 次
发布时间:2019-06-13

本文共 654 字,大约阅读时间需要 2 分钟。

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

一 利用css3 的width:calc(100% - npx);

    

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

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

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

    三 利用position:absolute;

        

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

    四 关于上下自适应

        

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

     

    转载于:https://www.cnblogs.com/xueandsi/p/6007188.html

    你可能感兴趣的文章
    Android应用开发-网络编程①
    查看>>
    input中的name,value以及label中的for
    查看>>
    静态库制作-混编(工程是oc为基础)
    查看>>
    jQuery 显示加载更多
    查看>>
    代理模式
    查看>>
    Confluence 6 系统运行信息中的 JVM 内存使用情况
    查看>>
    Confluence 6 升级以后
    查看>>
    用JS实现版面拖拽效果
    查看>>
    二丶CSS
    查看>>
    《avascript 高级程序设计(第三版)》 ---第二章 在HTML中使用Javascript
    查看>>
    Hibernate主键生成策略
    查看>>
    Crushing Machinery - Strong Support of Cement Enterprise
    查看>>
    AsyncTask
    查看>>
    Django框架(十九)—— drf:序列化组件(serializer)
    查看>>
    JS一些概念知识及参考链接
    查看>>
    关于JS中&&和||用法技巧
    查看>>
    suoi14 子树查找 (dfs)
    查看>>
    作业5 四则运算 测试与封装 5.1
    查看>>
    实验7
    查看>>
    双系统更改启动顺序
    查看>>