如何阻止查询结果在列之间拆分单个行的数据？答案

【问题标题】：How do I stop query results from splitting an individual row's data between columns?如何阻止查询结果在列之间拆分单个行的数据？
【发布时间】：2015-12-14 15:35:40
【问题描述】：

我已从 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>

【问题讨论】：

你可能想看看implode()。
我添加了这个：$array = array($Category1,$Name,$Address,$City,$State,$Zip,$Phone,$Website); echo "
```
".implode("\n",$array)."
```
";但它会将地址城市州和 zip 都放在单独的一行上。我可以重写它，但它仍然不能解决它在列之间分离记录的问题。
编辑您的帖子以添加新信息。
发布您的 HTML。我必须在这里做出很多假设，但根据您所说的，您的 HTML 视图将一些结果推到了框的顶部——很可能是由于您的列表框设置的高度为 350 像素。如果内容“长于”超过 350px，则它无处可去，只能向上。另一个快速说明，如果您的“列表”框被重复，请将它们更改为一个类，而不是为其分配一个 ID。
添加了 HTML 的精简版。我只是在我想要的地方做了一个包含 php。我也把 350px 的高度去掉了，但我忘了在这里编辑它。我注意到并没有什么不同。

标签： php mysql css

【解决方案1】：

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

【讨论】：

我认为确保每条记录都在自己的 div 中将是答案。我会尝试其他一些事情并在我弄清楚时报告。谢谢你:)

【解决方案2】：

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

如果您在进行上述更改后仍然遇到问题，请尝试将break-inside CSS property 应用于<div> 记录元素：

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

【讨论】：