Question

有没有办法使用CSS转置foundation block grid？目前我有一个按字母顺序排序的类别名称列表，基础块网格放在4列中。例如，类别列表项如下所示：

<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>

我使用以下scss创建一个块网格：

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。 codepen使用原生基础类而不是css mixins，但它具有相同的效果：

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

Answer 1

感谢您提供codepen。我完全不确定你在问什么，所以我继续为你的评论做了几个例子。

这个代码中有两个。以下各项的主要特点： http://codepen.io/anon/pen/BzLBeO

示例1
- writing-mode: vertical-lr;
- float
示例2
- transform: rotate();
- float

我可以提出更多的例子，但我认为你会明白这一点。

你可以利用display:[table-element]样式，列样式，哎呀，你可以滥用一些css选择器并投入各种风格。

这是一个通用的问题;你必须给我更多的更具体的例子/答案。

用css转换基础块网格

1 个答案: