Css 在两行两列中打断4个div

你能帮帮我吗。我一排有4个div

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

但不幸的是，IE浏览器版本 这里举个例子

有人能帮我吗

找到了解决方案：

.container{
    display: flex;
    flex-wrap: wrap;
}


.item {
    flex: 25%;
    max-width: 25%;
}


@media (max-width: 800px) {
    .item {
        flex: 50%;
        max-width: 50%;
    }
}


@media (max-width: 600px) {
    .item {
        flex: 100%;
        max-width: 100%;
    }
}

将.container类设置为显示：flex和flex wrap:wrap

因此，当设备屏幕宽度较小以容纳.item框时，它们将被包装到另一行

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 80px;
  height: 80px;
  border: 1px solid #eee;
}

使用flex和order:1

参见小提琴：

.集装箱{ 显示器：flex； 柔性包装：包装； 证明内容：中心； } .货柜：之后{ 内容：； 宽度：100%； } @仅介质屏幕，最小宽度：768px，最大宽度：1024px{ .容器。项目：n个孩子n+3{ 顺序：1； } } 1. 2. 3. 4.

---

在本例中，您将在一列中获取所有项。它的想法是向下移动4列中的2列。在其他工作中，您将得到2x2矩阵，而不是添加1x4行X列结构，以便更好地理解您的银行。这是一个很好的解决方案，但它在IE中通常不起作用.container { display: flex; flex-wrap: wrap; } .item { width: 80px; height: 80px; border: 1px solid #eee; }