如何阻止查询结果在列之间分割单个行's数据? - How do I stop query results from splitting an individual row's data between columns?

How do I stop query results from splitting an individual row's data between columns?

我从mySQL数据库执行了一个查询，结果正确返回。我用响应式CSS列对其进行了格式化——桌面上有三个列，随着屏幕宽度的减小，列的数量也会减少。EZ PZ。但是，我希望来自单行的所有结果保持在一起，而不是在列之间分裂。目前发生的情况是，我可能在一列的末尾有一个类别和名称，地址和其他信息跳到下一列的顶部。是否有办法保持每一行的信息在一起?

我对PHP和CSS完全是一个新手，所以请随意批评一切，以便我可以学习。编辑:添加HTML

PHP:(编辑回到原来，因为它工作得更好)

    <?php
        $mysqli = NEW MySQLi ( 'localhost', 'user', 'password', 'db' );
        $resultSet = $mysqli->query("
            SELECT Category, Name, Address, City, State, Zip, Phone, Website
            FROM Table
            WHERE ColumnName = 'SomeCity'
         ");
        if($resultSet->num_rows != 0) {
            while($rows = $resultSet->fetch_assoc())
            {
            $Category = $rows['Category'];
            $Name = $rows['Name'];
            $Address = $rows['Address'];
            $City = $rows['City'];
            $State = $rows['State'];
            $Zip = $rows['Zip'];
            $Phone = $rows['Phone'];
            $Website = $rows['Website'];
        echo "<h1>$Category</h1><p>$Name<br>$Address $City $State $Zip<br>$Phone<br>$Website</p>";
        }
        }
        ?>

CSS:

#listings {
  -webkit-columns: 3 200px;
     -moz-columns: 3 200px;
          columns: 3 200px;
  -webkit-column-gap: 3em;
     -moz-column-gap: 3em;
          column-gap: 3em;
  -webkit-column-rule: 1px dotted #ddd;
     -moz-column-rule: 1px dotted #ddd;
          column-rule: 1px dotted #ddd;
  -moz-column-fill: auto;
       column-fill: auto;
}
@media (min-width: 500px) {
  listings {
    height: 350px;
  }
}

HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <title>TITLE</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="assets/css/main.css" />
    </head>
    <body class="homepage">
        <div id="page-wrapper">
            <!-- Header -->
                <div id="header-wrapper">
                    <header id="header" class="container">
                        <!-- Logo -->
                            <div id="logo">
                                <h1><a href="index.html"><img src="images/logo.png" /></a></h1>
                            </div>
                        <!-- Nav -->
                            <nav id="nav">
                                <ul>
                                    <li><a href="index.html">Home</a></li>
                                    <li class="current"><a href="#">Page</a></li>
                                    <li><a href="#">Page</a></li>
                                </ul>
                            </nav>
                    </header>
                </div>
<!-- Main -->
    <div id="main-wrapper">
        <div class="container">
        <h3>Listings</h3>
            <div id="listings">
<?php require_once('my-php-listings.php'); ?>
            </div>
        </div>
    </div>
<!-- Footer -->
        </div>
<!-- Scripts -->
    </body>
</html>

不使用<pre>，而是将每个记录放在自己的<div>中。从CSS中删除350px的高度，除非你知道每个记录的高度不超过350px。然后，您可以为它分配一个类，如果需要进一步控制一个或多个特定框，甚至可以在循环遍历记录时添加唯一标识符。

我还建议将每个记录包装在自己的<div>中，并应用display: inline-block样式。这将确保块不会在列上换行。

如果在进行上述更改后仍然有问题，请尝试将break-inside CSS属性应用于<div>记录元素:

div.record-class {
    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
              page-break-inside: avoid; /* Firefox */
                   break-inside: avoid; /* IE 10+ */
}