4

下部の更新

水平方向の拡張が許可されている固定高さの順序付けられていないリストでアイテムを並べ替えようとしていますが、アイテムを最初に上から下に配置し、次に左から右に配置したいと考えています。これは、それらが含まれる表のセルの高さを設定された高さに保ちながら、水平方向に拡張できるようにするためです。

例えば：

<td>
  <ul class="thumbnails">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</td>

1 4
2 5
3

これはCSSのみで可能ですか？

各リスト項目は固定の高さと幅です。リスト内の要素の数は不明で可変です。リストの希望の高さは固定されています (3x li の高さ)。

垂直方向に拡張した固定幅のリストを動作させるのに問題はありませんが、転置は難しいようです。必要に応じてページで jQuery を使用していますが、CSS のみのオプションを好むでしょう。

更新：うまくいくかもしれない解決策を見つけたと思います。変換を使用してフィドル

Update2:動作中! セル内の配置を変更し、変換回転と変換原点と相対位置を使用してすべてを機能させました。おそらく最もエレガントなソリューションではありませんが、私はそれを受け入れます! 完全なソリューション

4

2 に答える 2

1

固定高さリストの場合、CSS 列 (JoshC による回答を参照) とwriting-modeプロパティ (現在 IE でサポートされており、IE7 まで限定的にサポートされています) を組み合わせることでこれを実現できます。

次のjsfiddle の例は、IE7 でも機能するようです。

/* CSS for modern browsers */
ul {
    height: 6.1em;
    column-width: 6em;
    column-gap: 0;
    column-fill: auto;
}

li {
    display: inline-block;
    vertical-align: top;
    height: 2em;
    width: 2em;
}

/* IE9 writing-mode workaround */
ul {
    word-spacing: -.5em;
    writing-mode: tb-lr;
}

li {
    writing-mode: lr-tb;
    word-spacing: normal;
}

/* 'magic' workaround of IE7 limitation */
*+html ul {
    writing-mode: tb-rl;
    filter: flipV();
}

*+html li {
    display: inline;
    zoom: 1;
    filter:flipH();
    background: #fff;
}
于 2013-11-06T02:13:51.530 に答える