如何制作没有flexbox的灵活块用于旧IE

时间:2015-06-05 09:16:17

标签: css3 cross-browser internet-explorer-9 flexbox

有关于简单表单的问题,有输入和按钮, 如果盒子里面有100%的可用空间,可能还有其他元素,没有它们的包裹。

enter image description here

这可以通过flexbox轻松完成,但不支持IE 8-9。 请帮我。 thx,Eugene。

1 个答案:

答案 0 :(得分:1)

使用 CSS 表格布局应根据内容为您提供灵活性:http://jsfiddle.net/37rxjskx/



.row {
    display: table;
    /* table-layout: fixed; */
    /* width: 100%; */
}

.col,
button {
    display: table-cell;
    padding: 8px 12px;
    outline: 1px dashed red;
}

<div class="row">
    <div class="col">input auto 100% of the free width space</div>
    <button type="submit">button<br> auto of the<br> inner content</button>
</div>
&#13;
&#13;
&#13;

table-layout: fixed反其道而行之:让浏览器应用宽度约束并忽略内容的相对数量。

我之前就同一主题所做的各种答案:equal widthsame heightfill remaining space