Question

我正在尝试使用PHP和CSS从数据库显示信息。但是，当我设置信息样式时，它会垂直地垂直显示。我希望将信息并排显示在容器中。

当我在第一个div中添加代码*/1 7-21 * * * cd ~/Pictures && env $(cat ~/cronenv | xargs) /path/to/first/script时，它将在我的整个网页上显示非常小的容器。我删除了<div class="w3-row-padding w3-third"，它又回到了垂直显示。我创建了w3-third并调用了ID以对div进行更改，尽管仍然没有任何变化。

任何帮助将不胜感激！

CSS

design

}

                    <style>

        design {
display:flex;
flex-wrap:wrap;

Answer 1

Have you tried using flexbox?

<div class="w3-col l3 m6 w3-margin-bottom">
 <div class="w3-card">
    <img src="images/'.$row["image"].'" style="width:100%"/>
    <div class="w3-container" style="display:flex;flex-wrap:wrap;">
      <p><h3>'.$row["name"].'</h3></p>
      <p>'.$row["location"].'</p>
      <p>'.$row["fee"].' EUR</p>
      <p>'.$row["numberTWeeks"].' Weeks</p> 
      <p>'.$row["email"].'</p>
      <button class="w3-button w3-light-grey w3-block"><i class="fa fa-paypal"></i><a href="addItem.php?personalTrainerID='.$row["personalTrainerID"].'"> Purchase</a></button>
    </div>
  </div>
</div>';

Answer 2

此引导程序确实可以工作，但不是php guy 检查一下

<div class="row">
    <div class="col-lg-12">
            <div class="form-horizontal">
                <div class="form-group">
                    <div class="col-lg-4">
`your left hand side contents here`
                    </div>
                    <div class="col-lg-7 col-lg-offset-1">
`your right hand side contents here`
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 3

您可以改为使用 span 标签，该标签与 div 几乎相同，但是它与其他标签并排显示，而 div -容器被设计为块状，将垂直显示。

我建议使用表，您的代码可能如下所示：

<?php
    $con=new mysqli("localhost:3308","root","","fypdatabase");
    $st=$con->prepare("select * from personal_trainer where specialty=?");
    $st->bind_param("s", $cat);
    $st->execute();
    $rs=$st->get_result();

    echo '<table class="table">
        <col style="width:100px;"><!--first column-->
        <col style="width:;"><!--second column--><!--if you leave value empty, its responsive-->
        <col style="width:100px;"><!--third column-->

        <tr><!--table headers-->
            <th>image</th>
            <th>name</th>
            <th>location</th>
            <th>fee</th>
            <th>numberTWeeks</th>
            <th>email</th>
            <th></th>
        </tr>
        ';
    while($row=$rs->fetch_assoc())
    {
        echo '
        <tr>
            <td><img src="images/'.$row["image"].'" style="width:100%"/></td>
            <td><p><h3>'.$row["name"].'</h3></p></td>
            <td><p>'.$row["location"].'</p></td>
            <td><p>'.$row["fee"].' EUR</p></td>
            <td><p>'.$row["numberTWeeks"].' Weeks</p></td>
            <td><p>'.$row["email"].'</p></td>
            <td><button class="w3-button w3-light-grey w3-block"><i class="fa fa-paypal"></i><a href="addItem.php?personalTrainerID='.$row["personalTrainerID"].'"> Purchase</a></button></td>
        </tr>';
    }
echo '</table>';        
?>

无法使用CSS将div与彼此水平对齐

3 个答案: