Question

我正在尝试做某种类似的胰蛋白酶，其中列表中的第一项比第二项和第三项更突出。

我已经达到了这样的程度，即我将第二个和第三个高度相加并将所述高度应用于第一个项目。但是在试图愚弄设计时，我需要它反过来玩得很好。

例如，如果第一个项目的高度大于第二个+第三个项目的合并值，则在某处（第二个或第三个）应用差异...抱歉，如果这一切看起来都令人困惑。

以下是代码：http://codepen.io/randydaniel/pen/uKkfb

var equalHeights = function(cols) {

$(cols).each(function() {
  var colTwo = parseInt($('#blog-listing li:nth-child(2)').css('height').replace("px", "")),
    colThree = parseInt($('#blog-listing li:nth-child(3)').css('height').replace("px", ""));

    var extra = colTwo + colThree;
    $(cols).css('height',extra);
  });
};

$(document).ready(function() {
  equalHeights($("#blog-listing li:first-child"));
});

免责声明：我对javascript知之甚少，因为我正在重新设计前一个例子中的一些代码，而Flexbox（如果可能的话）目前不是一个选项。

Answer 1

由于你已经在使用jquery，你可以这样做

    var equalHeights = function(cols) {

    $(cols).each(function() {
      var colTwo = $('#blog-listing li:nth-child(2)').height();
      var colThree = $('#blog-listing li:nth-child(3)').height();
      var colOne = $('#blog-listing li:nth-child(1)').height();

      var extra = colTwo + colThree;
      if(extra > colOne){
        $(cols).height(extra);
      }else{
        // split the difference between nodes height
        var split = (colOne - extra)/2;
        $('#blog-listing li:nth-child(2)').height(colTwo+split)
        $('#blog-listing li:nth-child(3)').height(colThree+split)
      }
  });
  };

  $(document).ready(function() {
    equalHeights($("#blog-listing li:first-child"));
  });

使用Javascript的等高度列

1 个答案: