4

私は自分の UL/LI 構文に少し慣れていないので、どうやってリストをラップするのか疑問に思っていました。たとえば、次のようにします。

1 2 3 4 5 6

のように見える：

1 4
2 5
3 6

現在、ヘッダー、コンテンツ、フッターがあります (高さはすべて特定の % に設定されています)。リストがフッターまたはコンテンツの一番下に達したら折り返す必要があります。

したがって、最終製品として必要なのは、画面に収まるものに基づいてサイズを動的に変更するコンテンツ div です。12 個の項目があり、画面が 2 列に収まる場合は 2 列で 6 行になり、画面が 4 列で収まる場合は 4 列で 3 行になります。

4

2 に答える 2

4

まず第一に、これはばかげています...しかし、それは機能します...しかし、それは特定の場合にのみ機能し、ばかげた数字が大量に含まれます。間違いなくモジュラーではありません。フィドル（ブラウザのサイズを変更する必要があることを言及する必要がありますか？）

HTML

<ul>
    <li>01</li>
    <li>02</li>
    <li>03</li>
    <li>04</li>
    <li>05</li>
    <li>06</li>
</ul>

CSS

/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
    padding: 0; margin: 0;
    width: 4em;
    border: 1px solid orange;
    overflow: hidden; /* in place of clearing float */
}

ul li {
    position: relative; /* for the negative top distance to work */
    display: inline-block;
    border: 1px solid red;
    width: 2em;
    height: 2em;
    float: left;
    clear: left;
}

ul li:nth-of-type(n+4) {
    float: right;
    clear: none;
    top: -6em;    
}


@media (min-width: 30em) {

    ul {
        width: auto;
        float: left;
    }

    ul li {
        float: left;
        clear: none;
        border: 1px solid green;
    }

    ul li:nth-of-type(n+4) {
       float: left;
       top: 0;
    }

} /* =========== end === */

これには素敵なjQueryがあると思います...テーブルにさまざまな量の情報が動的に入力されていない場合-このようなことを化粧的に行うか、絶対配置を使用できます-列はおそらく行く方法ですけれど。幸運を...

于 2013-06-02T20:47:16.737 に答える