Html 两个左浮动列内的动态宽度

想象一下这个网站：

[list][     iframe     ]

两列必须相邻设置，且宽度可变。我看到了很多解决方案，例如：但事实并非如此。我没有固定的宽度，也没有动态-左列必须与其内容一样薄，iframe必须填充所有剩余空间。 jQuery已启用，可用于此情况。另外，如果列表宽度发生变化，如何检测

---

尝试使用

显示：表格单元格

---

尝试使用

display:table单元格

.lineContainer{
溢出：隐藏；/*清除浮动*/
边框：1px实心#000
}
.lineContainer分区{
高度：10px
} 
.左{
宽度：100px；
浮动：左；
右边框：1px实心#000
}

.lineContainer{
溢出：隐藏；/*清除浮动*/
边框：1px实心#000
}
.lineContainer分区{
高度：10px
} 
.左{
宽度：100px；
浮动：左；
右边框：1px实心#000
}

我支持那些考虑表格的人，但我宁愿只为带有iframe的列添加

宽度：100%

。这是说明书

对于每列，根据 仅跨该列的单元格。最低要求是 具有最大最小单元格宽度（或“宽度”列）的单元格， 以较大者为准）。最大值是具有 最大单元格宽度（或“宽度”列，以较大者为准 更大）

---

但若您需要iframe来保持比率，那个么您必须将其包装为div并使用一些hack

我和那个些考虑表的人在一起，但我宁愿只为带有iframe的列添加

宽度：100%

。这是说明书

对于每列，根据 仅跨该列的单元格。最低要求是 具有最大最小单元格宽度（或“宽度”列）的单元格， 以较大者为准）。最大值是具有 最大单元格宽度（或“宽度”列，以较大者为准 更大）

---

但是如果你需要iframe来保持比率，你必须将它包装成div并使用一些hack

你能在JSFiddle中为我们提供一些代码吗？找到一个别人写的例子：Oliver，你救了我一天，发布它以便我能“接受”它你能在JSFiddle中为我们提供一些代码吗？找到一个别人写的例子：Oliver，你救了我一天，把它贴出来，这样我就可以“接受”它。这是一个小小的补充：如何将所有内容拉伸到100并添加滚动条？一个小小的补充：如何将所有内容拉伸到100并添加滚动条？

<div class='table-div'>
    <div class='left'>
        hello!
    </div>
    <div class='right'>
        <iframe src='http://www.stackoverflow.com'>
        </iframe>
    </div>
</div>

.table-div {
    display: table;
    width: 100%;
}

.left {
    display: table-cell;
    vertical-align: top;
}

.right {
    display: table-cell;
    width: 100%;
}

.right iframe {
    width: 100%;
}

<table style="width:100%;">
    <tr>
        <td style="border:1px solid black;width:100px;height:10px;"></td>
        <td style="border:1px solid black;height:10px;"></td>
    </tr>
</table>
<br /><br />

<div class="lineContainer">
    <div class="left"></div>
    <div class="right"></div>
</div>

.lineContainer {
    overflow: hidden; /* clear the float */
    border: 1px solid #000
}
.lineContainer div {
    height: 10px
} 
.left {
    width: 100px;
    float: left;
    border-right: 1px solid #000
}