爲什麼柱子疊起來了？

Question

我正在開一家小商店，我有一個頁面展示我的產品。這個頁面的代碼是這樣的：

<?php 

    error_reporting(E_ALL); ini_set('display_errors', 1); 

    if(isset($_GET['action']) && $_GET['action']=="add"){ 

     $id=($_GET['id']); 

     if(isset($_SESSION['cart'][$id])){ 

      $_SESSION['cart'][$id]['quantity']++; 

     }else{ 

      $sql_s="SELECT * FROM products 
       WHERE productCode='{$id}'"; 
      $query_s=mysql_query($sql_s) or die(mysql_error()); 
      if(mysql_num_rows($query_s)!=0){ 
       $row_s=mysql_fetch_array($query_s); 

       $_SESSION['cart'][$row_s['productCode']]=array(
         "quantity" => 1, 
         "price" => $row_s['buyPrice'] 
        ); 


      }else{ 

       $message="This product id it's invalid!"; 

      } 

     } 

    } 

?> 
    <h1>Classic Cars</h1> 
    <?php 
     if(isset($message)){ 
      echo "<h2>$message</h2>"; 
     } 
    ?> 
     <div class="container"> 

       <?php 

        $sql="SELECT * FROM products ORDER BY productName ASC"; 
        $query=mysql_query($sql) or die(mysql_error()); 

        while ($row=mysql_fetch_array($query)) { 

       ?> 
        <div class="row"> 
         <div class="col-xs-12 col-sm-4 col-md-3"> 
          <div class="recent-work-wrap"> 
           <img class="img-responsive" src="images/portfolio/recent/item1.png" alt=""> 
           <div class="overlay"> 
            <div class="recent-work-inner"> 
             <h3><a href="#"><?php echo $row['productName'] ?></a> </h3> 
             <p>€<?php echo $row['buyPrice'] ?></p> 
             <a class="btn btn-login" href="register.php">Add to cart</i></a> 
             <a class="btn btn-login" href="register.php">Read more</i></a> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 

       <?php 

        } 

       ?> 
     </div> 

沒關係的照片，他們都是一樣的時刻。

這部分的CSS如下：

#recent-works .col-xs-12.col-sm-4.col-md-3{ 
    padding: 0; 
} 

.recent-work-wrap { 
    position: relative; 
} 

.recent-work-wrap img{ 
    width: 100%; 
} 

.recent-work-wrap .recent-work-inner{ 
    top: 0; 
    background: transparent; 
    opacity: .8; 
    width: 100%; 
    border-radius: 0; 
    margin-bottom: 0; 
} 

.recent-work-wrap .recent-work-inner h3{ 
    margin: 10px 0; 
} 

.recent-work-wrap .recent-work-inner h3 a{ 
    font-size: 24px; 
    color: #fff; 
} 

.recent-work-wrap .overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    opacity: 0; 
    border-radius: 0; 
    background: #BDBDBD; 
    color: #fff; 
    vertical-align: middle; 
    -webkit-transition: opacity 500ms; 
    -moz-transition: opacity 500ms; 
    -o-transition: opacity 500ms; 
    transition: opacity 500ms; 
    padding: 30px; 
} 

.recent-work-wrap .overlay .preview { 
    bottom: 0; 
    display: inline-block; 
    height: 35px; 
    line-height: 35px; 
    border-radius: 0; 
    background: transparent; 
    text-align: center; 
    color: #fff; 
} 

.recent-work-wrap:hover .overlay { 
    opacity: 1; 
} 

代碼的結果是這樣的：

爲什麼列疊起來？我該如何解決這個問題？

Answer 1

HTML：

<img class="img-responsive inline-block" src="images/portfolio/recent/item1.png" alt=""> 

下面的標記添加到您的CSS：

.inline-block{ display: inline-block;} 

Answer 2

你可以試試這個CSS屬性的圖像：

img{ 
display: inline-block; 
float:left; 
}