列出项目变化高度问题

Question

正如您在屏幕截图中看到的,我在第一个"列"中有间距问题.我希望同一行中的每个列表项具有相同的高度.每行总是2个项目,所以我基本上想要浏览每2个项目并将它们设置为这些项目中最高的项目的高度.我已经看过很多解决方案,但似乎没有什么对我有用.我觉得我需要一些JS,但也许不是.

<div id="why-choose-us-list">
    <ul>
        <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</li>
        <li> Magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.</li>
        <li>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
        <li>Diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</li>
    </ul>
</div>

#why-choose-us-list {
  margin: 0 auto;
  overflow: hidden;
  width: 90%;
}

#why-choose-us-list li {
  background: url(img/bullet.png) left 0 top 3px no-repeat;
  float: left;
  line-height: 1.3em;
  list-style: none;
  margin-bottom: 100px;
  padding-left: 75px;
  padding-top: 0;
  text-align: left;
  width: 50%;
}

Answer 1

你可以使用这个jquery代码

    var check = true ; 
$('#why-choose-us-list > ul > li').each(function(i){
    if(check == true){
        var thisHeight = $(this).height();
        var NextHeight = $(this).next('li').height();
        if(thisHeight > NextHeight){
            $(this).next('li').css('height',thisHeight+'px');
        }else{
            $(this).css('height',NextHeight+'px');
        }
        $(this).css('background','red');
        $(this).next('li').css('background','yellow');
        check = false;
    }else{
        check = true;
    }
});

演示在这里

让我解释一下

第一：我曾经.each()循环遍历 (li)s

第二：我使用布尔检查 true 或 false 来检查 li 的索引..我的意思是如果 check == true 则代码检查 li index[0]、li index[2]、li index[4] ...等

第三：我得到了一个outerHeight(true)

li index[0] and next() of it li index[1]
li index[2] and next() of it li index[3] ...

第四：对其中哪一个比另一个高进行 if 语句..然后使用 .css() 将该高度附加到较小的 li

---> 不要忘记包含 jquery 库