• 如何用css实现"等高布局"。


    有时候为了让网页实现美观,在不知道高度的情况下,我们要用css实现等高布局效果,传统的方法,
    我们可以用javascript实现,但是由于需求决定或者其他的情况下,我们只能用css实现,其方法主要是采用
    “隐藏容器溢出”、"正内补丁"和"负外补丁"结合的方法实现的.

    代码如下:

    <div id="wrap">
      <div id="left">
        <p>left</p>
        <p>left</p>
        <p>left</p>
        <p>left</p>
        <p>left</p>
      </div>
      <div id="center">
        <p>center</p>
        ……(20个或更多个)
        <p>center</p>
      </div>
      <div id="right">
        <p>right</p>
        <p>right</p>
        <p>right</p>
      </div>
    </div>

    css样式如下:
    <style>
          * {margin:0;padding:0;}
          #wrap { 1000px; margin:0 auto; overflow:hidden;}
      #left, #center, #right { margin-bottom:-10000px; padding-bottom:10000px;}
      #left { float:left; 250px; background:#00FFFF;}
      #center { float:left; 500px; background:#FF0000;}
      #right { float:right; 250px; background:#00FF00;}
    </style>

    其中的 10000px 可以修改为其他值,但不能小于最高列的高度。 经测试,此方法兼容 IE6/IE7/IE8 beta 2/FF/Opera/Chrome 。 方法很简单吧。从这里可以看出:看似简单的 CSS,其实并不简单。

  • 相关阅读:
    ✨Synchronized底层实现---偏向锁
    🌞LCP 13. 寻宝
    ✨Synchronized底层实现---概述
    ⛅104. 二叉树的最大深度
    c++多线程之顺序调用类成员函数
    C++ STL实现总结
    C#小知识
    C#中HashTable和Dictionary的区别
    WPF的静态资源(StaticResource)和动态资源(DynamicResource)
    WPF之再谈MVVM
  • 原文地址:https://www.cnblogs.com/tugenhua0707/p/3284797.html
Copyright © 2020-2023  润新知