zoukankan      html  css  js  c++  java
  • CSS 实现行内和上下自适应的几种方法

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

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

    <body>
        <div style="border: 1px solid black; 100%;height: 100px">
            <div class="div1" style="float: left;height: 50px; 100px;background: red"></div>
            <div class="div2" style="float: left;height: 50px;calc(100% - 120px);background: yellow"></div>
        </div>
    </body>

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

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

    <body>
        <div class="box"  style="border: 1px solid black; 100%;height: 100px;display: table">
            <li class="left" style="background: red;display: block; 100px;height: 100px;"></li>
            <li class="right" style="background: deepskyblue;display: table-cell; 100%"></li>
        </div>
    </body>

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

    三 利用position:absolute;

    <body>
        <div style="height: 100px; 100%;border: 1px solid red">
            <span style="display: block;float: left;height: 100px; 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; 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; 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;上下都定位到边上,就会自适应了。。




  • 相关阅读:
    git 命令速查及使用
    Centos6.5 LAMP环境源码包安装与配置,附安装包百度网盘地址 (转做笔记)
    不再为Apache进程淤积、耗尽内存而困扰((转))
    centos6.5 安装linux 环境
    window 配置wnmp(转下整理 ,全)
    mac下安装 xampp 无法启动apache (转,留用)
    Git命令行(转用于学习和记录)
    apache 局域网访问
    华为云GaussDB(for opengauss)如何绑定公网,实现putty的远程访问gaussdb数据库。
    Day9 打卡acwing.429 奖学金
  • 原文地址:https://www.cnblogs.com/xueandsi/p/6007188.html
Copyright © 2011-2022 走看看