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

Posted 2023-03-06

【中文标题】如何将三列表格制作成移动两列表格

【英文标题】：How to make a three column table into a two column table for mobile

【发布时间】：2021-03-23 03:30:07

【问题描述】：

我需要在移动设备上将一个三列表变成一个二列表。这应该支持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 --->

【参考方案1】：

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

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

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

【参考方案2】：

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

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

媒体查询示例：

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

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

【讨论】：

我非常了解grid，但我在医院工作，需要支持IE。 IE 不支持网格。

我很抱歉。我没有阅读整个问题。我现在学到了一些东西来练习:)