1

我一直在绞尽脑汁想弄清楚如何将我所拥有的东西变成一些东西，当屏幕分辨率发生变化时，它将把我的内容组织成尽可能多的行和尽可能多的列（div）。

基本上，我当前的网站设置有一个高度为 430 像素的内容 div，它可以容纳任意数量的列，因为我有一个水平滚动。在为下一批数据创建另一列之前，每列中最多可以有 10 行数据。

我想要做的是将内容 div 的高度更改为 % 而不是 px 以便它会随着浏览器 res 缩放。如果内容 div 太小或太大，我当前的脚本仍将只输出相同数量的行和列，所以我想要的是将较小的屏幕分辨率的行数减少，而对于较高的分辨率屏幕则增加更多的行数。

如果浏览器变小，我有点希望内容包含在下一列 (div) 中。

希望这是有道理的。

有人可以指出我正确的方向吗？我知道这段代码目前的编写方式不同，但我想不出该怎么做：

函数.php：

<?php

function printTranscriptions()
{   
global $link;
$query = "SELECT * FROM transcriptions ORDER BY artist, title";
if ($result = mysqli_query($link, $query)) {
    $count = 0;        
    while ($row = mysqli_fetch_row($result)) {
        if (($count % 10) == 0) {
            if ($count > 0) {
                echo "</div>\n";
            }
            echo '<div class="content_columns">'."\n";
        }
        $artistTitle = $row[1] .  ' - ' . $row[2];
        echo '<p><a href="members_area/transcriptions/' . $artistTitle . '.pdf" target="_self">' . $artistTitle . '</a></p>'."\n";
        $count++;
    }
    if ($count > 0) {
        echo "</div>\n";
    }
    /* free result set */
    mysqli_free_result($result);
}
}

我的索引文件以以下结构调用内容：

<!-- Transcriptions page start -->
<div class="transcriptions_page">
    <h1>
        Transcriptions
    </h1>
    <div class="content">
        <div class="list-wrapper">
            <div class="transcription-list">
                <?php printTranscriptions();?>
            </div>
            <!-- transcription-list end -->
        </div>
        <!-- list-wrapper end -->
    </div>
    <!-- content end -->
</div>
<!-- Transcriptions page end -->

我的CSS：

.content {
    display: block;
    overflow: hidden;
    background-color: #2D949E;
    color: #fff;
    text-shadow: #FAFAFA;
    margin-top: 75px;
    margin-left: 10%;
    margin-right: 10%;
    padding: 20px 20px 20px 20px;
    height: 430px;
    border: 1px solid #99E9F1;
}

.list-wrapper {
    overflow:  hidden;
}

.transcription-list {
    display: block;
    white-space: nowrap;    
}

.content_columns {
    display: inline-block;
    background-color: #429EA8;
    letter-spacing: 1px;
    margin-right: 20px;
    padding: 0 10px;
}

.content_columns:last-child { 
    margin-right: 0 !important;
}

谢谢

4

0 回答 0