首页 文章

与窗口一起调整大小的等高柱

提问于
浏览 次
0

我认为这个标记应该可行，但我必须做错事 . 我有两个div，我希望它们具有相同的高度，并在调整窗口大小时动态调整大小 . 当盒子里面的文字换行时，其中一个盒子会变得更高 .

编辑：两个div是并排的，我希望较短的一个调整大小与高一个相同 . 如果用户具有较小屏幕的设备或将窗口的大小调整为较小，则会导致其中的文本在另一个框中包装 . 无论用户如何改变窗口的大小，我都希望它们保持相同的高度 .

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;
}
jquery resize height

4 回答

  • 0

    只需删除 > section ：您没有找到第一个选择器的englobing元素 .

    见http://jsfiddle.net/dystroy/Pzm8k/

    另外，也许你想用jquery $（window）.resize绑定函数调用你的函数，这样当你调整窗口大小时这些部分保持相等 .

    回复于
  • 0

    这样做很容易

    $(document).ready(function () { 

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

        $('.subFeatured').css({ height: maxHeight + 'px' });  
});​
    回复于
  • 0

    它并不完美，但我最终使用了我在这里找到的脚本：

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

    回复于
  • 0

    延迟添加，但为了将来参考，在较新的浏览器上，您可以使用 flexbox 来实现此目的 .

    这是一个有两个高度相同的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;
}

    参考文献

    • Comprehensive list of flexbox options

    • Browser support (caniuse flexbox)

    回复于

相关问题