• 两列等高布局 padding+margin的负值 CSS布局奇淫技巧之-多列等高


    代码:

    效果图:


    路人甲:OK?

    等高了??吃惊

    路人丙:不是吧?生气

    路人乙:你这是在逗我?疑问


    xiaomogg:

    效果有点慘,只是这的确是已经做了登高处理的

    为什么“登高”,看起来却不等高

    请留意代码处红框处

     padding-bottom:99px;
      margin-bottom:-99px;


    路人甲:这说明不了什么问题!

    路人乙:快进入主题吧

    路人丙:......................


    xiaomogg:

    事实上“等高” 真的是不等高

    1.假设把padding-bottom:99px;  margin-bottom:-99px;的值该大点比如:padding-bottom:999px;  margin-bottom:-999px,同一时候给两列最外层加入overflow:hidden;就能看到“等高”了

    2.其实,上面个样例假设不添加margin负值和padding的值,及时最外层给了overflow:hidden,效果仍然如上

    3.再看看第一步的效果图


    两边”“登高”了,及时右側没有不论什么东西,只是这仅仅是“障眼法”


    ①去掉最外层的overflow:hidden。

    ②或两列随意一列的填充内容高度大于999就会看到不等高的情况了

    ③“等高两列布局”,“登高多列布局”,假设单纯用csss做的话,仅仅是取巧或“障眼法”,假设出现上面两张情况或未知情况的话,“登高”

    的弊端就暴露在眼前

    ④假设能够限制两列内容高度。能够尝试使用纯css 两列布局




    以上效果经过检測,支持IE7 谷歌  火狐



  • 相关阅读:
    如何实现多个异步同步执行?
    Treap学习笔记
    实验
    bzoj2876 [NOI2012]骑行川藏(拉格朗日乘数法)
    [SCOI2007]最大土地面积(旋转卡壳)
    Splay学习笔记
    计算几何学习笔记
    [CQOI2006]凸多边形(半平面交)
    大数的乘法(C++)
    商人过河问题(DFS)
  • 原文地址:https://www.cnblogs.com/gccbuaa/p/6911494.html
Copyright © 2020-2023  润新知