如何阻止查询结果在列之间拆分单个行的数据？
Posted
技术标签:
【中文标题】如何阻止查询结果在列之间拆分单个行的数据？【英文标题】：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 的高度去掉了，但我忘了在这里编辑它。我注意到并没有什么不同。
【参考方案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+ */
【讨论】：
以上是关于如何阻止查询结果在列之间拆分单个行的数据？的主要内容，如果未能解决你的问题，请参考以下文章