0

左を右（画像を含む）divと同じ高さにしたい。div問題は、画像が流動的であることです (つまり、左に特定のサイズを指定できませんdiv)。

これは可能ですか？

<div class="container">
    <div class="left">
        <div>text</div>
        <div>text</div>
    </div>
    <div class="right">
        <div>image</div>
    </div>
</div>
4

3 に答える 3

2

悲しいことに、これは CSS で直接行うことはできません... JavaScript が必要です。jQueryでのやり方はこちら

var highestCol = Math.max($('.left').height(),$('.right').height());
$('.container > div').height(highestCol);

これにより、高さの高さが取得さ<div>れ、左右の両方に割り当てられます。このように、両方とも同じ高さになります。

column左右の div にも同様のクラスを追加することをお勧めします。次に、次を使用できます。

var highestCol = Math.max($('.left').height(),$('.right').height());
$('.column').height(highestCol);

そして、それをjQueryプラグインとしても使用できます...考慮してください：

$.fn.setAllToMaxHeight = function(){
    return this.height( Math.max.apply(this, $.map( this , function(e){
        return $(e).height()
    }) ) );
}

このようにして、高さを等しくしたいdivの任意のセットで使用できます。

$('div.columns').setAllToMaxHeight();

そして、すべての画像がロードされたときにコードを実行するようにしたいので (そうでなく、DOM の準備ができている場合、高さは正しくないため)、コードを次のようにラップします。

$(window).load(function () {
    // use the plugin way :
    $('div.columns').setAllToMaxHeight();

    // or use the other way :
    var highestCol = Math.max($('.left').height(),$('.right').height());
    $('.column').height(highestCol);

});
于 2012-10-08T22:48:51.980 に答える
1

VKen、あなたが達成しようとしているように見えるのは、フェイクコラムのレイアウトです。

非常に単純な (js を使用しない) 解決策の 1 つは、コンテナー div をカバーするイメージを使用することです。

.container{overflow:hidden;background: url(faux_background.jpg) repeat-y}
.left,
.right{float:left;}
.left{width:30%}

これは次のことを行います: コンテナーは、高さに関係なく、左と右の両方の div をラップします。左の div は常に 30% になります。コンテナ div の背景は、左の div が無限に成長しているように見えます (右の div が長い場合、またはその逆の場合)。

詳細については、別のリストにこれに関する素晴らしい記事があります: http://www.alistapart.com/articles/fauxcolumns/

于 2012-10-08T23:29:09.917 に答える
0

これを行うためのさまざまなアプローチのリストを次に示します: http://css-tricks.com/fluid-width-equal-height-columns/

于 2012-10-09T00:39:08.203 に答える