javascript - 如何设置整体Grid缩略图高度相等？

我有一个缩略图网格。它编码为 <ul>作为包装器和 <li>用于显示每个缩略图。我已将以下 CSS 设置为 <li>标签:

float: none;
display: inline-block !important;

缩略图显示在网格中。我还在 <li class="col-xs-12 col-sm-6 col-md-3 col-lg-3"> 中使用了 Bootstrap 类.根据分配的类，它应该每行显示 4 个缩略图。但目前它每行只显示 3 个缩略图。搜了一下发现是因为<li>给出了 display: inline-block每个 <li> 之后的 HTML 中都有换行符在 HTML 文件中。请告诉我如何使用 display: inline-block 每行显示 4 个缩略图.

此外，如果我设置 float: left对于 <li>那么我应该为每个 <li> 给出高度.但是那些 <li> 中的图像大小不同。

问题是:

我想每行显示 4 列(现在只显示 3 列)
我想将右边框设置为覆盖网格行的整个高度。 (现在，由于 <li> 的高度取决于缩略图的高度，对于较小的缩略图，右边界将跨越行的一半。)

请帮我解决这个问题。

body {
            background-color: #ddd;
            }

            .list-unstyled {
            background-color: #eee;
            width: 100%;
            }

            .list-unstyled li{
            background-color: #eee;
            float: none;
            display: inline-block !important;  
            /*display: -moz-grid !important;*/
            padding: 10px;
            margin: 0;
            border-right: 2px solid #ddd;
            border-bottom: 2px solid #ddd;
            box-sizing: border-box;    
            }

            .list-unstyled li img{
            width: 100%;
            }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
        <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-9">
        <ul class="list-unstyled">
            <li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
                <div class="item">
                    <div style="" class="book_image">
                        <a href="#" title=""><img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/A-HAPPY-SUNDAY.jpg" alt=""></a>
                    </div>
                    <div class="book_title">
                        <h3>Sample Title</h3>
                    </div>
                    <div class="book_price">
                        <a href="#" title="" class="btn btn-primary">Button</a>
                    </div>
                </div>
            </li>
            <li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
                <div class="item">
                    <div style="" class="book_image">
                        <a href="#" title=""><img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/12/cover17.jpg" alt=""></a>
                    </div>
                    <div class="book_title">
                        <h3>Sample Title</h3>
                    </div>
                    <div class="book_price">
                        <a href="#" title="" class="btn btn-primary">Button</a>
                    </div>
                </div>
            </li>
            <li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
                <div class="item">
                    <div style="" class="book_image">
                        <a href="#" title=""><img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/09/cover1.jpg" alt=""></a>
                    </div>
                    <div class="book_title">
                        <h3>Sample Title</h3>
                    </div>
                    <div class="book_price">
                        <a href="#" title="" class="btn btn-primary" >Button</a>
                    </div>
                </div>
            </li>
            <li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
                <div class="item">
                    <div style="" class="book_image">
                        <a href="#" title=""><img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/Bolne-Wali-Ghadi.jpg" alt=""></a>
                    </div>
                    <div class="book_title">
                        <h3>Sample Title</h3>
                    </div>
                    <div class="book_price">
                        <a href="#" title="" class="btn btn-primary">Button</a>
                    </div>
                </div>
            </li>
            <li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
                <div class="item">
                    <div style="" class="book_image">
                        <a href="#" title=""><img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/10/cover14.jpg" alt=""></a>
                    </div>
                    <div class="book_title">
                        <h3>Sample Title</h3>
                    </div>
                    <div class="book_price">
                        <a href="#" title="" class="btn btn-primary" >Button</a>
                    </div>
                </div>
            </li>
            <li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
                <div class="item">
                    <div style="" class="book_image">
                        <a href="#" title=""><img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2016/01/cover.jpg" alt=""></a>
                    </div>
                    <div class="book_title">
                        <h3>Sample Title</h3>
                    </div>
                    <div class="book_price">
                        <a href="#" title="" class="btn btn-primary">Button</a>
                    </div>
                </div>
            </li>
            <li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
                <div class="item">
                    <div style="" class="book_image">
                        <a href="#" title=""><img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/Chhoti-Chinti-ki-Badi-Dawat.jpg" alt=""></a>
                    </div>
                    <div class="book_title">
                        <h3>Sample Title</h3>
                    </div>
                    <div class="book_price">
                        <a href="#" title="" class="btn btn-primary">Button</a>
                    </div>
                </div>
            </li>
            <li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
                <div class="item">
                    <div style="" class="book_image">
                        <a href="#" title=""><img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/10/cover7.jpg" alt=""></a>
                    </div>
                    <div class="book_title">
                        <h3>Sample Title</h3>
                    </div>
                    <div class="book_price">
                        <a href="#" title="" class="btn btn-primary">Button</a>
                    </div>
                </div>
            </li>
            <li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
                <div class="item">
                    <div style="" class="book_image">
                        <a href="#" title=""><img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/10/cover13.jpg" alt=""></a>
                    </div>
                    <div class="book_title">
                        <h3>Sample Title</h3>
                    </div>
                    <div class="book_price">
                        <a href="#" title="" class="btn btn-primary">Button</a>
                    </div>
                </div>
            </li>
            <li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
                <div class="item">
                    <div style="" class="book_image">
                        <a href="#" title=""><img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/Fu-ku.jpg" alt=""></a>
                    </div>
                    <div class="book_title">
                        <h3>Sample Title</h3>
                    </div>
                    <div class="book_price">
                        <a href="#" title="" class="btn btn-primary">Button</a>
                    </div>
                </div>
            </li>
            <li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
                <div class="item">
                    <div style="" class="book_image">
                        <a href="#" title=""><img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/10/cover8.jpg" alt=""></a>
                    </div>
                    <div class="book_title">
                        <h3>Sample Title</h3>
                    </div>
                    <div class="book_price">
                        <a href="#" title="" class="btn btn-primary">Button</a>
                    </div>
                </div>
            </li>
            <li style="" class="col-xs-12 col-sm-6 col-md-3 col-lg-3 product-li">
                <div class="item">
                    <div style="" class="book_image">
                        <a href="#" title=""><img src="http://ebooks.nbtindia.gov.in/wp-content/uploads/2015/07/cover7.jpg" alt=""></a>
                    </div>
                    <div class="book_title">
                        <h3>Sample Title</h3>
                    </div>
                    <div class="book_price">
                        <a href="#" title="" class="btn btn-primary">Button</a>
                    </div>
                </div>
            </li>
        </ul>
        </div>
        </div>
      </div>

最佳答案

只需从 .list-unstyled li 中删除 display: inline-block !important; 并提供 display: flex; flex-wrap: wrap; 到 .list-unstyled 将使其成为您预期的结果。

.list-unstyled {
   background-color: #eee;
   width: 100%;
   display: flex;
   flex-wrap: wrap;
}

Working Fiddle

编辑:

给 display: flex; align-items: flex-end; 到 .list-unstyled li

Updated Fiddle

关于javascript - 如何设置整体Grid缩略图高度相等？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36325654/

javascript - 如何设置整体Grid缩略图高度相等？

上一篇：javascript - 悬停时用特定类别扩大一个部门

下一篇：css - 在文本区域内放置一个警告框