Question

我的flex布局有问题。我准备FIDDLE项目，通过调整输出框表格单元格将在下面一对一。它适用于chrome，firefox和IE，不能使用table elemnts tr，td ..

参见示例：My problem

CSS：

tr {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox !important;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

td {
    display: block;
}

.cell1 {

}

.cell2{
    width: 500px;
}

.cell3{
    min-width: 300px;
}

HTML：

<h1>real table</h1>
<table>
    <tr class="table">
        <td class="cell1">Cell 1</td>
        <td class="cell2">Cell 2</td>
        <td class="cell3">Cell 3</td>
    </tr>
</table>

<h1>div "table"</h1>
<div class="table">
    <span class="cell1">Cell 1</span>
    <span class="cell2">Cell 2</span>
    <span class="cell3">Cell 3</span>
</div>

感谢您的帮助！

解决：要在IE中工作必须设置display：block on parents elements tr，table ..现在它可以工作！

Answer 1

IE支持flex-wrap上的tr，只要tr已获得明确的宽度。

由于您希望宽度基于窗口宽度，可能需要使用JavaScript：

window.onresize= function() {
  var flex= document.querySelectorAll('.table');
  for(var i = 0 ; i < flex.length ; i++) {
    flex[i].style.width= document.body.clientWidth+'px';
  }
}

window.onresize();

CSS Flex布局tabe调整大小不适用于IE

1 个答案:

Fiddle