CSS 이미지 왼쪽에 오류가 있습니다.

Question

저는 UI 디자이너입니다. 나는 각각의 이미지가 왼쪽 아래의 다른 이미지 아래에 뜨기를 바란다. 그러나 그것 같이 나타나는. http://delhiwebdesigner.com/images/Capture.png 문제가있는 곳을 확인하십시오. folowed로

<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> 

CSS 코드 : 다음은 내 HTML 및 CSS 코드입니다 -

.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; 
     } 

Answer 1

http://jsfiddle.net/6deqxyk4/4/

.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;}