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％）。 / p>

希望这有帮助。

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>

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

3 个答案: