0

私が以下に持っているコードは、最大の列 (.border) の高さを見つけ、.container div 内にある他の列の高さを調整してそれに等しくすることになっています。残念ながら、このコードを意図したとおりに動作させることができなかったので、私よりも賢い人が助けてくれることを願っています.

ウィンドウのサイズが変更されるたびに、列の高さを再計算し、列のサイズをそれぞれ変更する必要があることにも注意してください。

<script type="text/javascript">
    $(document).ready(function(){
        //Bind the window onresize event
        $(window).bind('resize', resizeWindow);

        //Call resizeWindow() function immediately to intiially set elements
        resizeWindow();
    });

    function resizeWindow(){
        //Find all the container parent objects
        $('.container').each(function(){
            //Initialize the height variable
            var maxHeight = 0;

            //Cache the jQuery object for faster DOM access and performance
            var $borders = $(this).find('.border');

            //Find all the border child elements within this specific container
            $borders.each(function(){
                //Get current element's height
                var thisHeight = $(this).height();

                //Check if the current height is greater than the max height thus far
                //If so, change max height to this height
                if (thisHeight>maxHeight) maxHeight = thisHeight;
            });

            //Now that we have the maximum height of the elements,
            //set that height for all the .border child elements inside the parent element
            $borders.height(maxHeight);
        });
    }
</script>


<div class="container">
    <a href="#" class="border">
        <div class="column">
            <div class="content">asdf</div>
        </div>
    </a>
    <a href="#" class="border">
        <div class="column">
            <div class="content">asdf</div>
        </div>
    </a>
</div>
4

3 に答える 3

1

jQueryのequalHeightsプラグインを使用します。

http://www.cssnewbie.com/equalheights-jquery-plugin

$('.container .border').equalHeights(); // make all .border the same height
$(window).resize(function(){$('.container .border').equalHeights();});

参照： http： //jsfiddle.net/rZU35/

于 2013-03-04T23:25:00.657 に答える
0

DIVではなく、高さを提供する必要があると思います<a>。

このフィドルを試してください：

http://jsfiddle.net/ddFtX/1/

于 2013-03-04T23:35:15.323 に答える
0

これは、JavaScript の問題に対する正確な解決策ではありません。これは、JavaScript を必要としない CSS ソリューションです。マークアップでこれらのスタイルを使用すると、両方の列が常に同じ高さになります。

div.container {
    display: table;
    width: 100px;
}

div.container > a {
    display: table-cell;
    border: 1px solid red;
}

デモ

http://jsfiddle.net/wmbcr/

固定幅が設定されていない場合、これはサイズ変更時にも機能します。

于 2013-03-04T23:21:40.107 に答える