如何将三列表格制作成移动两列表格

Question

我需要在移动设备上将一个三列表变成一个二列表。这应该支持IE。它目前在调整视口大小时确实进入了两列，但该行中的第三个项目表现得很奇怪，并且向左或向右浮动，然后缺少一个插槽。我希望它看起来更像我使用 flex 或 grid 时的样子，并具有一些连续性。我想将代码更改为 flexbox，但不确定 IE 支持。有谁知道我该怎么做？

.topcolumn {
    float: left;
     padding: 10px;
  /*width: 250px;*/
 } 

/* Create two equal columns that floats next to each other */
.column {
    float: left;
     padding: 10px;
  width:300px;
 }

/* Clear floats after the columns */
.row{
    display: table;
    clear: left;
}

<!-- New Row Start -->
<div class="row">
<div class="column"><br>
<div class="name">Don Abrams, M.D.</div>
<div class="BoardTitle">Vice President, Graduate Medical Education</div>
</div>
<!-- BREAK --->
<div class="column"><br>
<div class="name">Charles Albrecht, M.D.</div>
<div class="BoardTitle">Chief Quality Officer</div>
</div>
<!-- BREAK --->
<div class="column"><br>
<div class="name">Debra Morton</div>
<div class="BoardTitle">Interim Chief Nursing Officer<br>
</div>
</div>
<!-- BREAK --->

Answer 1

继续使用 flexbox 来解决这个问题。 According to the MDN you should be okay.来自网站：

Internet Explorer 10，它实现了 display: flexbox 版本的规范，带有 -ms- 前缀。

另请注意，Internet Explorer 11 支持现代 display: flex 规范，但它在实现中存在许多错误。

Answer 2

根据我的知识和经验，总是使用媒体查询。

但是！从长远来看，为了使它更容易（第一次学习时很棘手），我会考虑考虑以网格格式布置组件。这将使您能够根据不同的产品分辨率更改网格的尺寸。祝你好运！

媒体查询示例：

@media 仅屏幕和（最小宽度：400 像素）{}

还有可能有用的资源：@​​987654321@。