javascript - 使用 Div 创建网格以制作流动的图像画廊

Question

一直在尝试使用 CSS 而不是使用 masonry 等插件来创建一个非常简单的照片库网格。我尝试了列、网格系统等 - 都失败了并且非常复杂。

我目前拥有的是 3-Div，每个 Div 都有一个网格的#ID，所以 div-1 有#Grid1，div-2 有#Grid2，div-3 有#Grid3。网格是 display:inline-block，因此它们彼此相邻 float 。这就像一个魅力!

但是，在小屏幕上 - 我只想显示 2 个网格，所以我将 Div 的大小从 33% 更改为 50% 以仅显示两个 div - 这导致在中心底部显示 #Grid3 #Grid1 和#Grid2。

我试图通过将#Grid3 的宽度设为 100% 并将其中的元素或部分设为 50% 来解决这个问题。这有点有效，但它生成了一个空白，如下图所示:

有办法解决这个问题吗？或者当屏幕尺寸较小时，删除#Grid3 并将其内容传播到#Grid1 和#Grid1 和2 中怎么样？有什么想法吗？

这是 HTML:

         <div class="wrapperA1">
            <div class="content">
                <div id="home-sectionD">
                    <div id="grid1"><!--Gird 1-->   

                        <article class="testimonial">
                        <img alt="Neal Kilburne​​" src="assets/images/neal kilburne​​.jpg"/>
                            <div>
                                <h3>Neal Kilburne​​</h3>
                                <p><em>CEO, iTEQ Global www.iteqglobal.com</em></p>
                                    <br>
                                <p>“Loai is a great asset to our company and provides us with great and quick responses,Such a talented designer which we have the honour of working with.” 2011 - 2012</p>
                            </div>  
                        </article>

                        <article class="testimonial">
                            <div>
                                <h3>Amanda Chui​</h3>
                                <p><em>Owner of www.beautyroom.ca</em></p>
                                    <br>
                                <p>Just what my website needed! When I had finished my website, I felt that it was missing something,so I enlisted in the help of Loai. He did a great job of giving my website the professional and polished look it needed without having me wait for days on end. Thanks, Loai!” June 23, 2012</p>
                            </div>
                        </article>

                    </div><div id="grid2"><!--Gird 2-->     

                        <article class="testimonial">
                            <img alt="Geeta Martinez" src="assets/images/geeta martinez.jpg"/>
                            <div>
                                <h3>Geeta Martinez</h3>
                                <p><em>Lawyer &amp; Business Consultant</em></p>
                                    <br>
                                <p>"Leo did a great job! He designed and put together several websites for me in less than a week. He was incredibly patient and flexible throughout the whole process, and took a lot of the stress out of the whole situation for me. He is a really nice guy to work with - I really appreciated his approach! I would definitely recommend working with him". July 14, 2013</p>
                            </div>  
                        </article>

                        <article class="testimonial">
                            <div>
                                <h3>Richard Jackson</h3>
                                <p><em>Photographer www.rjpstudios.co.uk​</em></p>
                                    <br>
                                <p>“Loai designed my website last year on wix though I could have done it myself loai added a proffesional touch to the design which is so important in creating the best first impeson.” 2013</p>
                            </div>
                        </article>  

                    </div><div id="grid3"><!--Gird 3-->         

                        <article class="testimonial">
                            <img alt="Glen Eric Huysamer" src="assets/images/glen eric huysamer.jpg"/>
                            <div>
                                <h3>Glen Eric Huysamer​</h3>
                                <p><em>Specialist Service Provider.​</em></p>
                                    <br>
                                <p>“I would like to take this opportunity to warn people who might consider using Loai Design Studio. You will have to buckle up and strap yourself in as this young designer and associates take you through the process of creating your design needs. I was pleasantly surprised from start to finish, and can say that even though Loai took control of the creative process the end result felt like it was mine. You can not go wrong with this young lad, go ahead surprise yourself”. December 30, 2011</p>
                            </div>
                        </article>

                        <article class="testimonial">
                            <div>
                                <h3>Richard Jackson</h3>
                                <p><em>Photographer www.rjpstudios.co.uk​</em></p>
                                    <br>
                                <p>“Loai designed my website last year on wix though I could have done it myself loai added a proffesional touch to the design which is so important in creating the best first impeson.” 2013</p>
                            </div>
                        </article>

                    </div>                      
                </div>
            </div>
        </div>

CSS:

/*Home Page SectionD---*/
#home-sectionD #grid1,
#home-sectionD #grid2,
#home-sectionD #grid3 {
    display: inline-block;
    vertical-align: top;
    width: 33.33%; 
    margin-left: -4px;
}

.testimonial {
    background-color: #FFFFFF;
    border: 1px solid #3e5679;
    margin: 0 7px 15px 7px;

    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.testimonial img {
    border-bottom: 1px dashed #3e5679;
    width: 100%;
    padding: 2px;
}

.testimonial div {
    padding: 20px;
}

.testimonial h3{
    color: #456087;
}   

.testimonial p:first-of-type{
    color: #8C9CB5;
}   

Answer 1

尝试在您的盒子上应用固定高度。这是强制它避免这些空格的唯一方法。