zoukankan      html  css  js  c++  java
  • 浮动+溢出隐藏滚动条

    浮动(float)

    float-right(left+top+bottom)

    分别是右浮动左浮动上浮动和下浮动,

    浮动会在某些时候带来一定影响,所以需要

    清除浮动:clear:none(默认值)  ——只有被浮动影响的标签才可以用,使用后该标签无法再浮动

            left(清除左浮动)

            right
              ...

    实现效果:

    实现此效果时候,先将布局分清楚,布局如下分为三大块

    首先建立相应的代码布局:

    <div>

      <div>

        <img></img>

      </div>

      <div>

        <img></img>

      </div>

      <div>

        <img></img>

      </div>

    </div>

    在第三个div中排列图片的时候遇到了困难,此时用到了浮动(float)

    我的图片排列顺序是这样的,在排列第三个图时,占据在第二个图的下方,所以需要给第三张图一个id,然后右浮动,这样才能到相应的位置去

    代码:

    .img3{
                    float: right;  ——右浮动
                     201px;
                    height: 214px;
                }

    ——————————————————分割线————————————————————————

    溢出隐藏+溢出滚动

    溢出是盒子的宽高固定的,且内容比盒子大,如图

    这就是典型的溢出,那怎样隐藏多出来的部分?

    就需要专门隐藏溢出的标签<overflow>

    overflow:visible  ——默认值,表示溢出的部分可见

        hidden ——将溢出部分裁剪,且不可见

        scroll ——将溢出变为滚动条(无论是否溢出都会有滚动条)

        auto ——根据溢出的方向出现滚动条

    overflow-x:横向溢出时的处理

        -y:纵向溢出时的处理

    经过处理后的效果:

  • 相关阅读:
    如何选择数据科学最好的Python IDE?
    Python代码详解:入门时间序列分类
    2月编程语言排行榜:Python 稳坐前三,Java依旧第一
    写 Python 时的 5 个坏习惯
    Python的多线程threading和多进程multiprocessing
    Python看春运,万条拼车数据背后的春节迁徙地图
    python数据分析案例实战——融360客户贷款风险预测(信用卡)
    情人节攻略:用Python撒狗粮的正确姿势
    Python函数式编程
    python基础
  • 原文地址:https://www.cnblogs.com/hzqzwl/p/11180357.html
Copyright © 2011-2022 走看看