html - 用 display:table-cell 填充可用空间

Question

是否可以在不指定手动宽度的情况下利用第二个 div 占用父 div 的可用空间？

这是试用演示的小提琴。

.right_cnt {
    display: table-cell;
    background:#FFC;
}

注意：我需要黄色框来占用可用的正确空间。

score 7 · Accepted Answer

display:table; width: 100%;在父元素上设置，float: left从兄弟元素中移除。 http://jsfiddle.net/byNpM/2/

score 1 · Accepted Answer

可以使用表格布局来做到这一点，但这不一定是最简单的方法：用你的小提琴来演示.

更简单的方法是修改第二个单元格以删除所有表格显示属性并将第二个元素设置overflow为hidden：另一个叉子演示这个。zoom: 1允许该技术在旧的 IE 中工作。如果您对overflow

score 1 · Accepted Answer

这篇文章可能是您正在寻找的。

解决这个问题其实很简单，但一点也不明显。你必须触发一个叫做“块格式化上下文”的东西，它以特定的方式与浮动交互。……

score 0 · Accepted Answer

在我看来，虽然display:table-cell在一行中的最后一个 div 上没有width将导致它拉伸以填充封闭的父display:tablediv，但表格单元格具有无法关闭的隐式“最小宽度”行为，强制它是它的孩子的宽度。

我不得不求助于将左单元格绝对定位在 100% 宽的右单元格上的宽填充之上。这样，当窗口变窄并且内容滚动时，100% 宽的内部 div 会根据需要缩小。

4 回答 4