表格单元格忽略宽度

Question

我的CSS有一个非常奇怪的问题，就像table-cell忽略宽度一样。

我有3个div

display: inline-table; vertical-align: middle;

第二个div里面有5个div

display: table-cell; vertical-align: middle; width: 10%;

只有5个div，但他们占据了父母的100％。当我改变这五个元素中的一个宽度时，其他元素也会改变。每次他们填写100％的父母。添加

table-layout: fixed;

对我不起作用。我想使用flex但它必须适用于IE9：/ Vertical align完美运行。

有没有人知道如何解决这个问题？

Answer 1

你想这样吗？

HTML代码：

<!-- Table Inline 1 -->
<div class="inline-table">
    <div class="table-cell">
        One
    </div>
    <div class="table-cell">
        One
    </div>
    <div class="table-cell">
        One
    </div>
</div>

<!-- Table Inline 2 -->
<div class="inline-table">
    <div class="table-cell">
        One
    </div>
    <div class="table-cell">
        One
    </div>
    <div class="table-cell">
        One
    </div>
    <div class="table-cell">
        One
    </div>
    <div class="table-cell">
        One
    </div>
</div>

<!-- Table Inline 3 -->
<div class="inline-table">
    <div class="table-cell">
        One
    </div>
    <div class="table-cell">
        One
    </div>
    <div class="table-cell">
        One
    </div>
</div>

CSS代码：

.inline-table{
        display: inline-table;
        border: 1px solid red;
        padding: .2em;
    }
    .table-cell{
        display: table-cell; vertical-align: middle;
        border: 1px dashed green;
        padding: .2em;
        width: 10%;
    }