如何实现css多模块等高

如何实现css多模块等高啊？

解决方案 »

  1.   

    js实现的，css可以实现吗？<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题 1</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript">
    /*window.onload = function() {
    function compare(value1, value2) {
    if (value1 < value2) {
    return 1;
    } else if (value1 > value2) {
    return -1;
    } else {
    return 0;
    }
    } var lh = document.getElementById('lefter').offsetHeight;
    var ch = document.getElementById('center').offsetHeight;
    var rh = document.getElementById('righter').offsetHeight;
    var arr = [lh, ch, rh];
    arr.sort(compare);
    document.getElementById('lefter').style.height = arr[0] + 'px';
    document.getElementById('center').style.height = arr[0] + 'px';
    document.getElementById('righter').style.height = arr[0] + 'px';
    }*/$(function() {
    /*function compare(value1, value2) {
    if (value1 < value2) {
    return 1;
    } else if (value1 > value2) {
    return -1;
    } else {
    return 0;
    }
    }

    var lh = parseInt($('.lefter').css('height'));
    var ch = parseInt($('.center').css('height'));
    var rh = parseInt($('.righter').css('height'));
    var arr = [lh, ch, rh];
    arr.sort(compare);
    $('.lefter').css({'height': arr[0]});
    $('.center').css({'height': arr[0]});
    $('.righter').css({'height': arr[0]});*/

    function denggao() {
    function compare(value1, value2) {
    if (value1 < value2) {
    return 1;
    } else if (value1 > value2) {
    return -1;
    } else {
    return 0;
    }
    }

    var lh = parseInt($(arguments[0]).css('height'));
    var ch = parseInt($(arguments[1]).css('height'));
    var rh = parseInt($(arguments[2]).css('height'));
    var arr = [lh, ch, rh];
    arr.sort(compare);
    $(arguments[0]).css({'height': arr[0]});
    $(arguments[1]).css({'height': arr[0]});
    $(arguments[2]).css({'height': arr[0]});
    }

    denggao('.center', '.lefter', '.righter');
    });
    </script>
    <style type="text/css">
    .container { width:960px; margin:0 auto; }
    .fl { float:left; }
    .fr { float:right; }
    .clear { clear:both; }
    .lefter { width:200px; border:1px solid #000; margin-left:5px; display:inline; }
    .center { width:200px; border:1px solid #000; margin-left:5px; display:inline; }
    .righter { width:50px; border:1px solid #000; margin-left:5px; display:inline; }
    </style>
    </head>
    <body>
    <div class="container">
    <div id="lefter" class="lefter fl">
         <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
        </div>
        <div id="center" class="center fl">
         <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
        </div>
        <div id="righter" class="righter fr">
         <p>fsfsf</p>
        </div>
        <div class="clear"></div>
    </div>
    </body>
    </html>
      

  2.   

    function denggao() {
            function compare(value1, value2) {
                if (value1 < value2) {
                    return 1;
                } else if (value1 > value2) {
                    return -1;
                } else {
                    return 0;
                }
            }
            
            var arr = [];
            for(var i=0; i<arguments.length; i++) {
                var arr[i] = parseInt($(arguments[i]).css('height'));
            }
            
            arr.sort(compare);        for(var i=0; i<arguments.length; i++) {
                $(arguments[i]).css({'height': arr[0]});
            }
        }调用时参数写'#divId','.className'也支持混写
      

  3.   

    js
    table
    负数margin
    css3的box模式
      

  4.   

    在网上查的负数margin加边框时还得在底下多写标签，如何才能简洁呢
      

  5.   

    看看这个能不能满足你的要求。但他不是真等高，看你的需求了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题 1</title>
    <style type="text/css">
    .container { width:960px; margin:0 auto; background:#ccc; text-align:center; font-size:35px; overflow:hidden;}
    .fl { float:left; font-size:16px;}
    .fr { float:right; font-size:16px;}
    .clear { clear:both; }
    .lefter { width:200px; border:1px solid #f90; background:#f4a; margin-left:5px; padding-bottom:2000em; margin-bottom:-2000em;}
    .center { width:200px; border:1px solid #fc0; background:#e4a; margin-left:5px; padding-bottom:2000em; margin-bottom:-2000em;}
    .righter { width:50px; border:1px solid #0f9; background:#94a; margin-left:5px; padding-bottom:2000em; margin-bottom:-2000em;}
    </style>
    </head>
    <body>
    <div class="container">
    <div id="lefter" class="lefter fl">
         <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
        </div>
    block1
        <div id="center" class="center fl">
         <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
        </div>
        <div id="righter" class="righter fr">
         <p>fsfsf</p>
        </div>
        <div class="clear"></div>
    </div>
    <div class="container">
    <div id="lefter" class="lefter fl">
         <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
        </div>
    block2
        <div id="center" class="center fl">
         <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
            <p>fsfsf</p>
        </div>
        <div id="righter" class="righter fr">
         <p>fsfsf</p>
        </div>
        <div class="clear"></div>
    </div>
    </body>
    </html>
      

  6.   

    用margin在火狐，谷歌，IE上调试看效果
      

  7.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS等高布局</title>
    <style type="text/css">
    body { margin: 0; padding: 0; font:14px/1.6em Arial, Helvetica, 宋体,sans-serif; text-align: cnter; }
    .main { width: 800px; margin: 0 auto; margin-top: 20px; color: #000; display:-moz-box;
    display:-webkit-box;
    display:box;
    -moz-box-align:stretch;
    -webkit-box-align:stretch;
    -o-box-align:stretch;
    box-align:stretch;}
    .left {float: left; width: 550px; border: 1px solid #000; }
    .right {float: right; width: 240px; border: 1px solid #000; }
    </style>
    </head>
    <body>
    <div class="main">
    <div class="left">
    <p>我很高</p>
    <p>我也很高</p>
    <p>我非常高</p>
    <p>我就是很高</p>
    <p>我很高</p>
    <p>我也很高</p>
    <p>我非常高</p>
    <p>我就是很高</p>
    <p>我很高</p>
    <p>我也很高</p>
    <p>我非常高</p>
    <p>我就是很高</p>
    <p>我很高</p>
    <p>我也很高</p>
    <p>我非常高</p>
    <p>我就是很高</p>
    </div>
    <div class="right">
    <p>我会和左边一样高吗？</p>
    <p>我和左边一样高哦！</p>
    </div>
    </div>
    </body>
    </html>