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