Html CSS图像向左浮动错误

我是一名用户界面设计师。我希望每个图像都向左浮动，一个在另一个下面。但它看起来像。请检查问题出在哪里。下面是我的HTML和CSS代码：

<div class="books-container">
<article class="entry">
                        <img src="images/books/1.jpg" alt="" title="" />
                        <a href="#">
                            <div class="text">
                                <p class="head">LeMans</p>
                                <p class="title">LeMans</p>
                            </div>
                        </a>
                    </article>

<article class="entry">
                        <img src="images/books/2.jpg" alt="" title="" />
                        <a href="#">
                            <div class="text">
                                <p class="head">LeMans</p>
                                <p class="title">LeMans</p>
                            </div>
                        </a>
                    </article>

<article class="entry">
                        <img src="images/books/4.jpg" alt="" title="" />
                        <a href="#">
                            <div class="text">
                                <p class="head">LeMans</p>
                                <p class="title">LeMans</p>
                            </div>
                        </a>
                    </article>

<article class="entry">
                        <img src="images/books/3.jpg" alt="" title="" />
                        <a href="#">
                            <div class="text">
                                <p class="head">LeMans</p>
                                <p class="title">LeMans</p>
                            </div>
                        </a>
                    </article>

<article class="entry">
                        <img src="images/books/5.jpg" alt="" title="" />
                        <a href="#">
                            <div class="text">
                                <p class="head">LeMans</p>
                                <p class="title">LeMans</p>
                            </div>
                        </a>
                    </article>

<article class="entry">
                        <img src="images/books/6.jpg" alt="" title="" />
                        <a href="#">
                            <div class="text">
                                <p class="head">LeMans</p>
                                <p class="title">LeMans</p>
                            </div>
                        </a>
                    </article>

<article class="entry">
                        <img src="images/books/7.jpg" alt="" title="" />
                        <a href="#">
                            <div class="text">
                                <p class="head">LeMans</p>
                                <p class="title">LeMans</p>
                            </div>
                        </a>
                    </article>

<article class="entry">
                        <img src="images/books/8.jpg" alt="" title="" />
                        <a href="#">
                            <div class="text">
                                <p class="head">LeMans</p>
                                <p class="title">LeMans</p>
                            </div>
                        </a>
                    </article>

<article class="entry">
                        <img src="images/books/9.jpg" alt="" title="" />
                        <a href="#">
                            <div class="text">
                                <p class="head">LeMans</p>
                                <p class="title">LeMans</p>
                            </div>
                        </a>
                    </article>

<article class="entry">
                        <img src="images/books/10.jpg" alt="" title="" />
                        <a href="#">
                            <div class="text">
                                <p class="head">LeMans</p>
                                <p class="title">LeMans</p>
                            </div>
                        </a>
                    </article>

<article class="entry">
                        <img src="images/books/11.jpg" alt="" title="" />
                        <a href="#">
                            <div class="text">
                                <p class="head">LeMans</p>
                                <p class="title">LeMans</p>
                            </div>
                        </a>
                    </article>

<article class="entry">
                        <img src="images/books/12.jpg" alt="" title="" />
                        <a href="#">
                            <div class="text">
                                <p class="head">LeMans</p>
                                <p class="title">LeMans</p>
                            </div>
                        </a>
                    </article>

<article class="entry">
                        <img src="images/books/13.jpg" alt="" title="" />
                        <a href="#">
                            <div class="text">
                                <p class="head">LeMans</p>
                                <p class="title">LeMans</p>
                            </div>
                        </a>
                    </article>

<div class="clear"></div>

---

您的容器宽度固定为1200px，这就是它不工作的原因。那么，我应该尝试什么样的容器宽度？请看这里Hi Himanshu，plz向我展示具有不同高度图像的小提琴示例。您要查找的内容是css无法实现的，只有massy.js对您的搜索有用

 .books-container {
        width: 1200px;
        margin: 100px auto 0;
    }

    .entry {
        width: 25%;
        float: left;
        height: auto;
        padding: 10px;
        position: relative;
    }

        .entry img {
            width: 100%;
            display: block;
        }

        .entry .text {
            position: absolute;
            display: none;
            top: 0;
            vertical-align: middle;
            height: 100%;
            background: red;
            opacity: 0.5;
            text-align: center;
            width: 100%;
            padding: 10px;
        }

.books-container {max-width: 1200px;width:100%; margin: 100px auto 0;}
.entry {width:400px; float: left; height: auto; padding: 10px; position: relative;}
.entry img {width: 100%; display: block;}
.entry .text {position: absolute; display: none; top: 0; vertical-align: middle; height: 100%; background: red; opacity: 0.5; text-align: center; width: 100%; padding: 10px;}