Question

我想让列表中的所有元素都具有相同的高度，即使其中一个元素中有更多文本，那么如果其他元素可以调整则会很好。我已经使用了div但是没有问题可以改为li，实际上我正在寻找建议如何以最佳方式解决这个问题。

我正在使用twitter-bootstrap来说明我准备好的问题https://jsfiddle.net/f2vwvsgu/1/

<div class='container'>
  <div class='row'>
    <div class='col-sm-4 col-xs-12'>
      <div class='img'>
        <img src='http://lorempixel.com/image_output/nature-q-g-707-400-2.jpg' class='img-responsive' />
      </div>
      <div class='description'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed commodo sapien, vitae congue velit.
      </div>
    </div>
    <div class='col-sm-4 col-xs-12'>
      <div class='img'>
        <img src='http://lorempixel.com/image_output/nature-q-g-707-400-2.jpg' class='img-responsive' />
      </div>
      <div class='description'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed commodo sapien, vitae congue velit.
      </div>
    </div>
    <div class='col-sm-4 col-xs-12'>
      <div class='img'>
        <img src='http://lorempixel.com/image_output/nature-q-g-707-400-2.jpg' class='img-responsive' />
      </div>
      <div class='description'>
        Lorem ipsum dolor sit amet
      </div>
    </div>
    <div class='col-sm-4 col-xs-12'>
      <div class='img'>
        <img src='http://lorempixel.com/image_output/nature-q-g-707-400-2.jpg' class='img-responsive' />
      </div>
      <div class='description'>
        Lorem ipsum dolor sit amet
      </div>
    </div>
    <div class='col-sm-4 col-xs-12'>
      <div class='img'>
        <img src='http://lorempixel.com/image_output/nature-q-g-707-400-2.jpg' class='img-responsive' />
      </div>
      <div class='description'>
        Lorem ipsum dolor sit amet
      </div>
    </div>
    <div class='col-sm-4 col-xs-12'>
      <div class='img'>
        <img src='http://lorempixel.com/image_output/nature-q-g-707-400-2.jpg' class='img-responsive' />
      </div>
      <div class='description'>
        Lorem ipsum dolor sit amet
      </div>
    </div>    
  </div>
</div>

Answer 1

在没有JS的bootstrap或CSS中执行此操作只能通过一些flexbox-tweak来实现，这需要另一种方法来处理网格。看看CSS-Flexbox，它绝对值得。

为了解决我们的问题，我编写了一个简短的脚本，以最小的标记更改获得所需的结果。您只需要添加：

<div class='container js-equalize-container'>

<div class='col-xs-4 js-equalize-target'>

https://jsfiddle.net/685f822q/

一个简短的解释：脚本的作用：它将所有高度设置为＆＃34; auto＆＃34;，查找最高的一个，并将此高度应用于具有js-equalize-target-class的每个元素。 / p>

Answer 2

我调试了一些现有的解决方案，发现可以在CSS中使用clear: both;作为最后一个列表元素，在这个具体示例中它将是：

.col-sm-4:nth-child(3n + 1){
      clear: both;
}

这正是我所寻找的。

相同的高度元素 - bootstrap

2 个答案: