CSSを使用した基礎ブロックグリッドの転置

Question

CSSを使用してfoundation block gridを転記する方法はありますか？現在、私は基礎ブロックグリッドを4列にアルファベット順に並べたカテゴリ名のリストを持っています。私はブロックのグリッドを作成するには、次のSCSSを使用

<ul> 
    <li>A</li> 
    <li>B</li> 
    <li>C</li> 
    <li>D</li> 
    <li>E</li> 
    <li>F</li> 
    <li>G</li> 
    <li>H</li> 
    <li>I</li> 
    <li>J</li> 
    <li>K</li> 
    <li>L</li> 
    <li>M</li> 
    <li>N</li> 
</ul> 

を：：

ul { 
    @include grid-row; 
    @include grid-layout(4, 'li'); 
} 

結果はカテゴリが順番に並べ、4列に破ったです。たとえば、カテゴリリストの項目は次のようになり水平：

A B C D 
E F G H 
I J K L 
M N 

しかし、私はアイテムがこのように、列に配置されているように、このリストは転置したい：

A E I M 
B F J N 
C G K 
D H L 

私はjquery-transposeプラグインがうまく動作するが、このカテゴリリストはドロップダウンメニューにあり、最初は非表示になっています。プラグインはリストに表示される必要があるので、行数と列数を判断できます。これは、メニューが表示されたときを監視してプラグインを呼び出す必要があることを意味します。

私はそれを行うことができますが、代わりにCSSソリューションを見つけることを望んでいました。これは可能ですか？

ここにマークアップを示すコードがあります。 codepenは、ネイティブの基礎クラスではなく、CSSのミックスインを使用していますが、それは同じ効果です：codepenを提供するための

http://codepen.io/anon/pen/rLLXXo

Answer 1

感謝。私はあなたが尋ねてきたことを正確には分からなかったので、私は先に進み、あなたのレビューのためにいくつかの例を作りました。

このコードには2つのコードがあります。以下それぞれについての主な特徴： http://codepen.io/anon/pen/BzLBeO

• 例1

  • writing-mode: vertical-lr;
  • float

• 例2

  • transform: rotate();
  • float

あり、私が思い付くことができ、より多くの例はたくさんありますが、私はあなたのアイデアを得ると思います。

display:[table-element]スタイル、列スタイル、ひどい点を利用することができます。いくつかのCSSセレクタを悪用し、さまざまなスタイルをスローすることができます。

これは一般的な質問です。より具体的な例/答えを求めてください。