我想使列表中的所有元素都具有相同的高度,即使其中一个元素中包含更多文本,那么如果其他元素可以调整,那就太好了。我曾经使用过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>

最佳答案

只有通过一些flexbox调整,才可以在没有JS的bootstrap或CSS中进行此操作,这需要对网格进行另一种处理。查看CSS-Flexbox,这绝对值得。

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

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

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


https://jsfiddle.net/685f822q/

简短的解释:脚本的作用:将所有高度设置为“自动”,寻找最高高度,并将此高度应用于js-equalize-target-class的每个元素。

10-05 21:01
查看更多