php - 画面解像度に応じて div を介して PHP でプログラムによって生成されたコンテンツをラップする方法

Question

画面の解像度が変わったときに、自分のコンテンツを必要な数の行と必要な数の列 (div) に整理するものに変更する方法を見つけようと、頭を悩ませてきました。

基本的に、私の現在のウェブサイトの設定には、水平スクロールがあるため、任意の数の列に対応できる高さ 430px のコンテンツ div があります。各列内には、次のデータ ロット用に別の列が作成される前に、最大 10 行のデータが存在する可能性があります。

私がしたいのは、コンテンツ div の高さを px ではなく % に変更して、ブラウザーの解像度に合わせてスケーリングすることです。現在のスクリプトは、コンテンツ div が小さすぎるか大きすぎる場合、同じ数の行と列しか出力しないため、画面解像度が小さい場合は行数を減らし、解像度が高い場合は行数を増やします。

ブラウザを小さくした場合、コンテンツを次の列 (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;
}

ありがとう