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%;
}

enter image description here

Answer 1

你没有提到你的解决方案需要什么浏览器支持，但实现这样的一个非常好的方法是在CSS中使用flexbox（浏览器支持在这里http://caniuse.com/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>

我还做了一些其他更改，比如使用list-style-image来显示子弹，没有必要将其设置为背景。为了做到这一点，我已经从使用padding-left切换到margin-left，并确保两者都是％，加起来为50％（或者更少也可以）。我还建议使用em作为底部边距而不是px，以便它更好地扩展。

Working example here

另外值得注意的是，你有许多列表项目，宽度为50％，填充另外75px。 CSS宽度不包括填充，因此每个元素的宽度为50％+ 75px，因此这些元素实际上每行可以容纳2个。

Answer 2

跨浏览器兼容的解决方案，没有浮动的麻烦

不应在布局设计中使用浮动。它们的目的是将内容插入文本主体（如图像或旁边），并让内容优雅地围绕它流动。如果误用，他们可能会遇到很多问题，通常当浮动页面出现问题时，它就是浮动。

Flexbox非常棒，但旧浏览器仍然不能很好地支持它。

您应该在项目上使用display: inline-block;而不是浮点数或弹性框，您还需要使用vertical-align: top来修复对齐问题。

标签之间的空格将呈现为文本，因此将占用一个字符的空间。在父项上使用font-size: 0;，在项目上使用font-size: 1rem

（Demo）

#why-choose-us-list {
    font-size: 0px;
}
#why-choose-us-list li {
    display: inline-block;
    vertical-align: top;
    font-size: 1rem;
}

Answer 3

您可以使用css选择器清除第三项。

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

Answer 4

你可以使用这个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;
    }
});

DEMO HERE

让我解释一下

1st：我使用.each()来遍历（li）s

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

第3名：我获得了

的outerHeight（true）

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

第4段：if if声明哪一个高于另一个...然后使用.css（）

将该高度附加到较小的li

---＆GT;不要忘记包含jquery库

Answer 5

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

＆＃13;

#why-choose-us-list {
  margin: 0 auto;
  overflow: hidden;
  width: 90%;
}

#why-choose-us-list li {
  float: left;
  width: 50%;
  min-height: 100px;
}

＆＃13;

<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>

＆＃13;

Answer 6

这是一个简单的解决方案：

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

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

演示：https://jsfiddle.net/tusharj/qfocv5om/

Answer 7

Wow, I am overwhelmed with the great, quality answers! All of them are options to go with but after messing around with it some more later, I made one simple change. I added:

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

and that fixed it. I'm really only concerned with IE 8 and above so this works. It's such a simple fix. I guess that's what I get for trying to work after midnight! Thanks again for all the responses!

列出项目变化高度问题

7 个答案:

跨浏览器兼容的解决方案，没有浮动的麻烦