为什么列堆积？

Question

我正在建一个小商店，我有一个页面，我显示我的产品。此页面的代码如下所示：

echo $userFriends['FriendName'];

别介意这些照片，目前它们都是一样的。

这部分的CSS如下：

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

代码的结果如下所示：

为什么列堆积了？我该如何解决这个问题？

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