是否有可能创建一个html表来流列或行并相应地将其包装在CSS中？
是否有可能创建一个html表来流列或行并相应地将其包装在CSS中？
提问于 2016-08-31 20:07:57
我在想，如果没有Javascript，下面的内容是否可能出现。假设我有下一个表(它将项目包装到下一行，左转右)。
01 02 03 04
05 06 07 08
09 10 11 12我希望能够切换到列(从上到下，然后换到下一列)。
01 05 09
02 06 10
03 07 11
04 08 12理想情况下，我希望能够以声明的方式指定元素的数量，比如我可以指定元素的数量(行-4或列-4)。
<div class="myContainer column-4">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
<div>07</div>
...
</div>如果我想切换(我只需更新css)
<div class="myContainer row-4">
<div>01</div>
<div>02</div>
<div>03</div>
<div>04</div>
<div>05</div>
<div>06</div>
<div>07</div>
...
</div>我试着玩flex盒，因为它有弯曲的方向，但我似乎不能始终基于任何元素来包装。
回答 5
Stack Overflow用户
回答已采纳
发布于 2016-08-31 20:25:05
您可以在float和css列之间交替使用。我制作了一个JS Fiddle来演示：
Stack Overflow用户
发布于 2016-08-31 20:19:09
您可以为此使用flexbox。
请检查此示例：
table {
display: flex;
}
table tr {
display: flex;
flex-direction: column;
float: left;
}<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr><tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr><tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
Stack Overflow用户
发布于 2016-08-31 20:21:17
可以将列与媒体查询一起使用，请参阅篡改https://jsfiddle.net/sxh0n7d1/46/
.myContainer {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
@media (max-width: 600px) {
.myContainer {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39258179
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号