html - 在表格内时如何在 IE11 中包装弹性项目?
问题描述
我有以下代码(此处为 codepen),我需要在 IE11 中工作(因为它在普通浏览器中工作)......
卡片应该被包裹(没有水平的scoll,只有在需要时才垂直)到显示的窗口中。
.table {display: table;}
.container {display: flex; flex-wrap: wrap;}
.card {width: 300px; height: 100px; background: green; margin: 2px;}
<div class="table">
<div class="container">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
<div class="card">7</div>
<div class="card">8</div>
</div>
</div>
这不是 IE 的情况。
我知道没有包装“表格”这将起作用,但我无法更改它,所以请考虑保持表格原样......
解决方案
添加table-layout: fixed; width: 100%;
到父.table
包装器在 IE11 中为我解决了这个问题。但是,我建议不要在表格布局中放置某些内容,除非您需要显示表格内容......并且<table>
无论如何您真的想为此使用语义元素。
您可能必须根据您的分辨率全屏查看下面的代码段才能看到它的堆叠/包装。在我的 26" 1080p 显示器上的 IE 中未最大化,由于站点列式布局的最大宽度限制,它只显示一列。
.table {display: table; table-layout: fixed; width: 100%; }
.container {display: flex; flex-wrap: wrap;}
.card {width: 300px; height: 100px; background: green; margin: 2px; }
<div class="table">
<div class="container">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
<div class="card">7</div>
<div class="card">8</div>
</div>
</div>
推荐阅读
- javascript - Axios Post Request 不起作用
- javascript - V-for 里面有一个数组
- django - 按反向关系的注释字段对查询集进行排序
- c - 确定在汇编代码中另一个字符串 Y 中不存在的字符串 X 中的字符数
- symlink - msys2 中的符号链接:复制还是硬链接?
- java - 备份不包括表的 derby 数据库
- oracle - Oracle - 舍入所有列中的所有数值
- python - “语法错误:非默认参数遵循默认参数”的含义
- android - 使用 SurfaceView 在活动上显示插页式广告的行为
- typescript - 打字稿接口:除了已知密钥之外的其他任何东西都必须是
?