如何使卡片在同一行对齐？答案

【问题标题】：How do I make the card align on the same row?如何使卡片在同一行对齐？
【发布时间】：2021-11-24 08:14:24
【问题描述】：

我正在尝试在每张卡片中显示 MySQL 查询，但是如何内联打印卡片？它现在在彼此下方打印，但我希望它们水平位于同一行。

<?php
            $output="";

            while($row = mysqli_fetch_array($result))  
            {  
                $id = $row['courseID'];
                $name = $row['courseName'];
                $category = $row['category'];
                $description = $row['description'];

                $output.=
                "
                    <div class='col-sm-12'>
                        <div class='col-md-4 mb-5'>
                            <div class='card h-100'>
                                <div class='card-body'>
                                    <h4 class='card-title'>$name</h4>
                                    <p class='card-text'>$id</p>
                                    <p class='card-text'>$description</p>
                                </div>
                            <div class='card-footer'><a href='#' class='btn btn-primary'>Assign</a></div>
                        </div>
                    </div>";    
            }
            $output .= "</div></div>"; 
            echo $output;
            ?>

【问题讨论】：

这个问题与 HTML 和 CSS 的关系比与 PHP 的关系更大。请edit您的问题包括您拥有的生成的HTML代码和您拥有的CSS代码。
在 while 循环之前创建新的 div 并显示：flex;
你能在定义$output变量之前显示一些代码吗，因为你在PHP中的while循环之后关闭了两个div
一个简单的方法是将存储卡片html的主div的样式设置为white-space: nowrap，并在制作卡片html的while循环中，在第一个
中你可以添加@ 987654327@

标签： php html css

【解决方案1】：

你可以在你的while循环之前创建一个新的div并加入

如下所示，您将创建一个名为cards的新div

<?php
        $output="<div class='cards' style='white-space:nowrap'>";

        while($row = mysqli_fetch_array($result))  
        {  
            $id = $row['courseID'];
            $name = $row['courseName'];
            $category = $row['category'];
            $description = $row['description'];

            $output.=
            "
                <div class='col-sm-12' style='display:inline-block'>
                    <div class='col-md-4 mb-5'>
                        <div class='card h-100'>
                            <div class='card-body'>
                                <h4 class='card-title'>$name</h4>
                                <p class='card-text'>$id</p>
                                <p class='card-text'>$description</p>
                            </div>
                        <div class='card-footer'><a href='#' class='btn btn-primary'>Assign</a></div>
                    </div>
                </div>";    
        }
        $output .= "</div></div>"; 
        echo $output;
?>

我希望通过使用此代码，卡片将在同一行对齐。

【讨论】：

【解决方案2】：

使用这个 sn-p。使用 grid-gap 可以更好地实现网格。

<!DOCTYPE html>
<html>

<head>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: 0.5rem;
      grid-row-gap: 0.5rem;
      padding: 10px;
    }
    
    .grid-item {
      background-color: #999;
      border: 1px solid #fff;
      padding: 20px;
      font-size: 30px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
  </div>
</body>

</html>

【讨论】：

根据需要增加网格
如果需要还有网格间隙！

【解决方案3】：

创建一个以容器为类的父 div 向该父 div 添加一个以行为类的 div，然后将您的卡片添加到该行中的类 div 中。

例如：

<div class="container">
    <div class="row">
      //your cards div  
    </div>
</div>

【讨论】：

【解决方案4】：

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
    <div class="container">
        <div class="row">
            <!--from here-->

            
            <div class="col-lg-4 col-md-6 col-sm-12 mb-5 mt-5">
                <div class="card">  

                    <div class="card-body">
                        <div class="card-title">
                            <h1>title</h1>
                        </div>

                        <div class="card-text">
                            <h5>body</h5>
                            <a class="btn btn-outline-primary rounded-0 float-end" href="" name="readmore">Read more</a>
                        </div>
                    </div>
                </div>
            </div>


            <!--to here-->
        </div>
    </div>

在（从这里）和（到这里）之间复制代码

这是我不久前使用的一个 for 循环示例：

<div class="container">
        <div class="row">
            <?php for ($i=0; $i < count($user_elements[0]) ; $i++):?>
                <div class="col-lg-4 col-md-6 col-sm-12 mb-5 mt-5">
                    <div class="card">

                        <img class="card-img-top" src="<?php if(isset($user_elements)){echo "../private/uploads/".$thumbnail[$i];}?>">  

                        <div class="card-body">
                            <div class="card-title">
                                <h1><?php echo $user_elements[4][$i];?></h1>
                            </div>

                            <div class="card-text">
                                <h5><?php echo $user_elements[5][$i];?></h5>
                                <a class="btn btn-outline-primary rounded-0 float-end" href="readmore.php?Post=<?php echo $user_elements[0][$i];?>" name="readmore">Read more</a>
                            </div>
                        </div>
                    </div>
                </div>
            <?php endfor?>

        </div>

    </div>

【讨论】：

【解决方案5】：

把你的时间移到这里：

<div class="container">
    <div class="row">
        
    </div>
</div>

【讨论】：