Question

我一直绞尽脑汁试图找出如何将我所拥有的东西变成可以根据需要将我的内容组织成尽可能多的行以及在屏幕分辨率发生变化时根据需要将多少列（div）组织起来。

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

我想要做的是将内容div的高度更改为％not px，以便它将与浏览器res一起缩放。如果内容div太小太大，我当前的脚本仍将只输出相同数量的行和列，所以我想要的是对于较小的屏幕res而言行数较少，对于较高的res屏幕则更多。

如果浏览器变小，我希望将内容包装到下一列（div）中。

希望这是有道理的。

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

的functions.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;
}

由于

如何通过Divs编程生成以PHP编程方式生成的内容，具体取决于屏幕分辨率

0 个答案: