0

このマークアップは機能するはずだと思いましたが、何か間違ったことをしているに違いありません。同じ高さにしたい2つのdivがあり、ウィンドウのサイズが変更されたときに動的にサイズを変更します。ボックス内のテキストが折り返されると、ボックスの1つが高くなります。

編集：2つのdivが並んでいるので、短い方のdivのサイズを高い方のdivと同じ高さにしたいと思います。ユーザーが画面が小さいデバイスを使用している場合、またはウィンドウのサイズを小さくする場合は、のテキストが1つのボックスで折り返されます。ユーザーがウィンドウのサイズをどのように変更しても、両方を同じ高さにしたいと思います。

JS

$(document).ready(function () {    
    $('div.subFeaturedContainer > section').each(function() {

        var $sameHeightChildren = $(this).find('.subFeatured');
        var maxHeight = 0;

        $sameHeightChildren.each(function() {
            maxHeight = Math.max(maxHeight, $(this).outerHeight());
        });

        $sameHeightChildren.css({ height: maxHeight + 'px' });

    });
});

HTML

<div class="subFeaturedContainer">
    <section class="subFeatured">
        <h2>Header</h2>
        <a href="#">Nam vel risus mauris, id lacinia nulla</a>
    </section>

    <section class="subFeatured">
        <h2>Header</h2>
        <a href="#">Donec tincidunt tellus ac dolor tristique blandit. Nam vel iaculis lorem.</a>
    </section>
</div>

CSS

.subFeatured {
width: 43.5%;
float: left;
background: rgba(0, 0, 0, 0.7);
border-top: 1px solid #b1bdbe;
padding: 2% 3% 2% 3%;
}

.subFeatured:nth-child(even) {
float: right;
}
4

4 に答える 4

0

単に削除し > sectionてください：最初のセレクターでengoogleg要素が見つかりません。

http://jsfiddle.net/dystroy/Pzm8k/を参照してください

さらに、jquery $（window）.resizeバインディング関数を使用して関数を呼び出し、ウィンドウのサイズを変更してもセクションが同じままになるようにしたい場合があります。

于 2012-05-03T19:34:41.847 に答える
0

これで簡単にできます

   $(document).ready(function () { 

        maxHeight = 0;
        $('.subFeatured').each(function() {
            maxHeight = Math.max(maxHeight, $(this).outerHeight());
        });

        $('.subFeatured').css({ height: maxHeight + 'px' });  
});​
于 2012-05-03T19:56:24.013 に答える
0

完璧ではありませんが、ここで見つけたスクリプトを使用することになりました。

http://www.tutrino.com/2011/12/08/equal-height-columns-with-jquery-jxcol-plugin/

于 2012-05-10T15:22:20.280 に答える
0

後期追加ですが、将来の参考のために、新しいブラウザではflexboxこれを実現するために使用できます。

これは、同じ高さの2つのdivを持つ例です（FIDDLE HERE）

HTML

<div class="container">
  <div class="col-1">
    <p>I'm column one</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>Here's my bottom text</p>
  </div>
  <div class="col-2">I'm just a small div</div>
</div>

CSS

.container {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}

参考文献

于 2014-02-25T07:45:27.200 に答える