表格单元格忽略宽度

时间:2017-04-05 17:37:08

标签: html css

我的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完美运行。

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

1 个答案:

答案 0 :(得分:2)

你想这样吗?

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%;
    }
寻找你感兴趣的贴纸↓↓↓
豫ICP备18024241号-1