Question

我试图并排显示结果而不是：

actual result

这就是我想要创造的东西（结果并排显示）：

trying to create

这是我的代码：

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

有办法吗？

我也试过漂浮：左，但整个事情就像这样 enter image description here

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

php code

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

结果 enter image description here

tada：）

Answer 1

你可以将你的<li>包裹起来并在css中设置一个具有以下属性的类：float：left;

像这样：

    echo '<li class="float-left">';
    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>";
    echo '</li>';

CSS：

.float-left{
   float:left;
}

Answer 2

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

希望有所帮助。祝你好运！

试图调整PHP echo的输出

2 个答案: