2

我在这里遇到问题，我正在尝试从我的数据库中获取所有标题并按字母顺序列出它们，第一个字母指示我们所处的位置，以便更清楚：

A:
 Animal
 Alex
B:
 Boo
C:
 Crap

实际上，这就是我使用的，并且效果很好：

<?php

$conn = mysql_connect('localhost','user','pw') or die(mysql_error());
$db = mysql_select_db('dbname') or die(mysql_error());

$sql = "select * from games order by title";
$result = mysql_query($sql, $conn) or die(mysql_error());

while ($list = mysql_fetch_array($result)) {

$letter = strtoupper(substr($list['title'],0,1));

if ($letter != $prev_row) {
echo "<br><b><u>$letter</u></b><br>";
} 
echo '<li><a href="/play/id/' . $list['id'] . '/">'.$list['title'].'</a></li>';

$prev_row = $letter;
} // end while
?>

但我希望这样，当它到达我的 div 的末尾时，比如说 400px 高度，它从一个新列开始，如：

A:                             C: 

Alien                         Crap

B:                             D:

Boo                           Dododododo

我现在真的一无所知，所以任何帮助都会非常感激！

非常感谢

4

2 回答 2

3

由于 HTML 中尚未广泛支持列，因此您必须计算打印的行数并将它们乘以您定义的行高。

<?php

$conn = mysql_connect('localhost','user','pw') or die(mysql_error());
$db = mysql_select_db('dbname') or die(mysql_error());

$sql = "select * from games order by title";
$result = mysql_query($sql, $conn) or die(mysql_error());
echo "<div style='float:left;height:400px;width:150px;'>";
$current_height = 0;
$line_height = '12px'; // replace by your value

while ($list = mysql_fetch_array($result)) {

$letter = strtoupper(substr($list['title'],0,1));

if ( $current_height >= (400 - 2 * (int) $line_height) ) {
echo "</div><div style='float:left;height:400px;width:150px;'>";
$current_height = 0;
}
if ($letter != $prev_row) {
echo "<br><b><u>$letter</u></b><br>";
$current_height += (int) $line_height;
} 
echo '<li><a href="/play/id/' . $list['id'] . '/">'.$list['title'].'</a></li>';
$current_height += (int) $line_height;

$prev_row = $letter;
} // end while
echo "</div>";
?>
于 2010-03-02T16:00:10.820 回答
1

HTML 没有提供任何方法来告诉文本的呈现高度，所以没有办法告诉你什么时候需要跳转到第二列。

我过去如何做到这一点只是做出了一个任意决定，例如，“A”和“B”将在第一列，“C”和“D”在第二列。

当 CSS3 真正开始滚动时，它可以指定多列布局：http ://www.quirksmode.org/css/multicolumn.html

于 2010-03-02T15:59:15.447 回答