如何创建可折叠的网格、表或列

Question

我想在2列中显示数据。当有足够的空间时，数据应该如下所示:

|  data   |  data2  |
|  data3  |  data4  |
|  data5  |  data6  |

如果用户调整了窗口的大小，没有足够的空间来显示两列，我希望数据看起来像这样:

|  data   |
|  data2  |
|  data3  |
|  data4  |
|  data5  |
|  data6  |

如果我猜网上已经有关于这个的问题和帖子，但我不知道该搜索什么。链接，提示，示例代码和指南都是赞赏!

Answer 1

如果您不需要支持IE9及以下版本，您可以使用display: flex

.items {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}
.item {
    flex-basis: 50%;
}
@media only screen and (max-width: 767px) {
    .item {
        flex-basis: 100%;
    }
}

<div class="items">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

Answer 2

这样怎么样?

http://jsfiddle.net/LcsgtaLv/1/

这里的问题是，你必须决定在什么大小的"中断"将发生(在什么大小的表将开始显示2列)，就像我们在这里做的:

@media screen and (min-width: 700px) {

基本上我们让他们得到100%的宽度直到700px，从那里我们关闭了49% - 2px(因为边框，如果没有边框，我们可以设置为50%)。

Answer 3

在这个例子中，您可以使用一个表(在语义上适合于显示表格数据)。在较小的设备上，您可以将单元格的显示布局更改为块，而不是其初始的表格单元格布局。

你可以看到下面的例子。如果屏幕宽度低于400px(可以调整)，它会变成单列。

小提琴也在这里:http://jsfiddle.net/vz6nLj8a/1/

.responsive-table td {
    display: block;
    border: 1px solid;
    border-width: 0 1px;
    padding: .5em 1em;
}
    
@media (min-width: 400px) {
    .responsive-table td {
        display: initial;
        border-right-width: 0px;
    }
        .responsive-table td:last-child {
            border-right: 1px solid;
        }
}

<table class="responsive-table" cellspacing="0" cellpadding="0">
    <tbody>
        <tr>
            <td>data1</td>
            <td>data2</td>
        </tr>
        <tr>
            <td>data3</td>
            <td>data4</td>
        </tr>
        <tr>
            <td>data5</td>
            <td>data6</td>
        </tr>
    </tbody>
</table>