php - 尝试调整 PHP echo 的输出

Question

我试图并排显示结果，而不是这样:

这就是我要创建的内容(并排显示的结果):

这是我的代码:

<?php
include_once("connect.php");
$sql = "SELECT * FROM house ORDER by id ASC";
$res = mysql_query($sql) or die(mysql_error());
if (mysql_num_rows($res) > 0){
    while ($row = mysql_fetch_assoc($res)){
        $id = $row['id'];
        $title = $row['header'];
        $img = $row['img'];
        $description = $row['description'];
        $address = $row['address'];
        $link .= "<a href='#'>".$title."</a>";

        echo "<div class='cat_link'>";
        echo $link;
        echo '<dt></strong></dt><dd>'
            . '<img src="data:image/jpeg;base64,' 
            . base64_encode($img) . '" width="200" height="200">'
            . '</dd>';
        echo $description;
        echo "</div>";
    }
}
else {
    echo "<p> There are are no house</p>";
}
?>

有办法吗？

我也试过 float:left 但整个事情变成了这样

编辑:好的，在你们的帮助下，这是我的最终结果，这些是我的代码，希望它能在某些时候帮助你

php代码

<main class="content">
    <?php
    include_once("connect.php");
    $sql = "SELECT * FROM house ORDER by id ASC";
    $res = mysql_query($sql) or die(mysql_error());
    if (mysql_num_rows($res) > 0){
        while ($row = mysql_fetch_assoc($res)){
            $id = $row['id'];
            $title = $row['header'];
            $img = $row['img'];
            $description = $row['description'];
            $address = $row['address'];
            $link .= "<a href='#'>".$title."</a>";
            
        echo "<div class='cat_link'>";
        echo "<a href='#'>".$title."</a>";
        echo '<dd>'
     . '<img src="data:image/jpeg;base64,' . base64_encode($img) . '" width="200" height="200">'
     . '</dd>';
        echo $description;
        echo "</div>";
            
        }
        
    }
    else {
        echo "<p> There are are no house</p>";
    }
    ?>
    </main>

CSS代码

.cat_link{
    display: inline-block;
    width: 200px;
    height:100%;
    padding: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid #000000;
    margin-bottom: 5px;
    background-color: #cccccc;
    color: #000000;
}

.cat_link:hover{
    background-color: #dddddd;
}

.content {
    background: black;
    margin-top: -5px; /* this is my margin so your could be vary or remove it if you dont want it */
    margin-bottom: -5px;
}

结果

多田:)

Answer 1

非常简单!只需在 css 中将其添加到您的 cat_link 类中:display: inline-block看一下这个例子:https://jsfiddle.net/max234435/x6tmatvc/

希望对您有所帮助。祝你好运!