Javascript 列表项可变高度问题

正如您在屏幕截图中看到的，我在第一列中有一个间距问题。我希望同一行中的每个列表项具有相同的高度。每行中总是有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%;
}

我是一个多愁善感的人，我是一个优秀的消费者，我是一个临时劳工
麦格纳·阿利奎亚姆·埃拉特（Magna aliquyam erat），塞德·迪亚姆·沃卢普图（sed diam voluptua）。在vero eos et accusam et
在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的
不寻常的情况下，暂时不受劳动和生活的影响。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的

#为什么选择我们{
保证金：0自动；
溢出：隐藏；
宽度：90%；
}
#为什么选择我们{
背景：url（img/bullet.png）左0顶3px不重复；
浮动：左；
线高：1.3em；
列表样式：无；
边缘底部：100px；
左侧填充：75px；
填充顶部：0；
文本对齐：左对齐；
宽度：50%；
}

---

您可以使用此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）中循环

第二：我用布尔检验法来检验李的指数。。我的意思是，如果check==true，则对li索引[0]、li索引[2]、li索引[4]等进行代码检查

第三：我有一个户外灯光（真的）

第四条：如果陈述的话，其中哪一条比另一条高。。然后使用.css（）将该高度附加到较小的li

---

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

尝试为这些li元素的样式添加最小高度

#为什么选择我们的名单{
保证金：0自动；
溢出：隐藏；
宽度：90%；
}
#为什么选择我们{
浮动：左；
宽度：50%；
最小高度：100px；
}

我是一个多愁善感的人，我是一个优秀的消费者，我是一个临时劳工
麦格纳·阿利奎亚姆·埃拉特（Magna aliquyam erat），塞德·迪亚姆·沃卢普图（sed diam voluptua）。在vero eos et accusam et
在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的
不寻常的情况下，暂时不受劳动和生活的影响。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的

以下是一个简单的解决方案：

var maxHeight = 0;
$('#why-choose-us-list li').each(function() {
    maxHeight = $(this).outerHeight() > maxHeight ? $(this).outerHeight() : maxHeight;
});

$('#why-choose-us-list li').height(maxHeight);

---

演示：

您没有提到解决方案需要什么样的浏览器支持，但实现这一点的一个非常好的方法是在CSS中使用flexbox（浏览器支持在这里，您可能需要使用供应商前缀，我没有，但这目前在Chrome中可以正常工作）。像这样的东西可以满足您的需求：

<style media="screen">
  #why-choose-us-list {
    margin: 0 auto;
    overflow: hidden;
    width: 90%;
  }

  #why-choose-us-list > ul {
    display: flex;
    flex-flow: row wrap;
  }

  #why-choose-us-list li {
    margin-left: 2%;
    margin-bottom: 4em;
    width: 48%;
    line-height: 1.3em;
    list-style-image: url(img/bullet.png);
    text-align: left;
  }
</style>

#为什么选择我们{
保证金：0自动；
溢出：隐藏；
宽度：90%；
}
#为什么选择美国列表>ul{
显示器：flex；
柔性流：行换行；
}
#为什么选择我们{
左缘：2%；
边缘底部：4em；
宽度：48%；
线高：1.3em；
列表样式图像：url（img/bullet.png）；
文本对齐：左对齐；
}

我做了一些其他更改，比如使用列表样式的图像来显示项目符号，不需要将其设置为背景。为了做到这一点，我已经从使用左边空白切换到左边空白，并确保两者都是加起来50%的%（或者更少也行）。我还建议使用em的底部保证金，而不是px，这样它的规模更好

还值得注意的是，您有许多列表项，所有列表项的宽度为50%，另一个填充为75px。CSS宽度不包括填充，因此每个元素都有50%+75px的宽度，因此这些元素实际上不能容纳每行2个。

跨浏览器兼容解决方案，而不需要浮点运算 布局设计中不应使用浮动。它们的目的是将内容插入文本体（如图像或旁白），并让内容优雅地围绕文本体流动。当被误用时，它们可能会附加很多问题，通常当带有浮动的页面出现问题时，它就是浮动

Flexbox非常棒，但仍然没有得到旧浏览器的很好支持

您应该使用

display:inline块，而不是float或flexbox

在项目上，您还需要使用

垂直对齐：top

来解决对齐问题

标记之间的空间将呈现为文本，因此将占用一个字符的空间。使用

字体大小：0和项目上的
字体大小：1rem

（）

您只需使用css选择器清除第三项即可

#why-choose-us-list li:nth-child(2n + 1){
    clear: both;
} 

哇，我被这些优秀的、高质量的答案弄得不知所措！所有这些都是可以使用的选项，但在以后再处理一些之后，我做了一个简单的更改。我补充说：

li:nth-child(odd) {
    clear: both;   
}

这就解决了问题。我真的很抱歉，这样才行。这是一个如此简单的解决方案。我想这就是我午夜后工作的结果！再次感谢所有的回复
 不灵活，
li
的文本是变化的，可以更适合
150px
，这将导致溢出。如果高度变化，当然最好使用js方法。为什么要向下投票。请在我选择的选项旁边添加评论是的。但在这里，我们可以保持任何数量的项目在一行。我希望flexbox是一个选项，在这个时候对我来说。谢谢
#why-choose-us-list li:nth-child(2n + 1){
    clear: both;
} 

li:nth-child(odd) {
    clear: both;   
}