CSS圖像左浮動錯誤

我是一個UI設計器。我希望每個圖像浮動到另一個下方的左側。但它的出現像。 http://delhiwebdesigner.com/images/Capture.png請檢查問題所在。下面是我的HTML和CSS代碼：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>

CSS代碼folowed： -

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

來源

2014-09-06 chirag

你容器寬度固定爲1200像素所以它不工作 – himanshu 2014-09-06 06:33:41

所以，我應該嘗試容器寬度？ – chirag 2014-09-06 06:39:55

http://jsfiddle.net/6deqxyk4/4/看到這裏 – himanshu 2014-09-06 06:42:41

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

來源

2014-09-06 06:31:58 himanshu

CSS圖像左浮動錯誤

回答

相關問題