zoukankan      html  css  js  c++  java
  • 等高DIV

    1、利用边距(margin)和补白(padding)实现div等高

    <style type="text/css">
    body,div,p
    {margin:0;padding:0;}
    #wrap
    {overflow:hidden;width:1000px;margin:0 auto;}
    #left,#center,#right
    {margin-bottom:-10000px;padding-bottom:10000px;}
    #left
    {float:left;width:250px;background:#00FFFF;}
    #center
    {float:left;width:500px;background:#FF0000;}
    #right
    {float:right;width:250px;background:#00FF00;}
    </style>
    <div id="wrap">
    <div id="left">
    <p>left</p>
    <p>left</p>
    </div>
    <div id="center">
    <p>center</p>
    </div>
    <div id="right">
    <p>right</p>
    <p>right</p>
    <p>right</p>
    </div>
    </div>

    2、js方法实现等高、

    <style type="text/css">
    body,div,p
    {margin:0;padding:0;}
    #wrap
    {overflow:hidden;width:1000px;margin:0 auto;}
    #left
    {float:left;width:500px;background:#00FFFF;}
    #right
    {float:right;width:500px;background:#00FF00;}
    </style>
    <div id="wrap">
    <div id="left">
    <p>left</p>
    <p>left</p>
    </div>
    <div id="right">
    <p>right</p>
    <p>right</p>
    <p>right</p>
    </div>
    </div>
    <script type="text/javascript">
    document.getElementById(
    'left').style.height = document.getElementById('right').offsetHeight + 'px';
    </script>

    3、背景图欺骗-看似等高

    如果左右2部分都有可平铺的背图,可以切一条铺早父元素上,父元素高度是随子元素延展的,看上去也等高了,如下图




  • 相关阅读:
    js 控制页面跳转的5种方法
    弹性盒
    js中变量声明有var和没有var的区别
    解决Cannot read property 'style' of null中样式问题
    JS中用for循环解决重复定义的问题
    博客第一天
    jQuery 无缝轮播
    随鼠标移动
    倒计时
    轮播图
  • 原文地址:https://www.cnblogs.com/bianyuan/p/2356144.html
Copyright © 2011-2022 走看看