Question

想象一下网站：

[list][     iframe     ]

两列必须彼此相邻设置，并且具有可变宽度。我看到了许多解决方案，例如：http://www.sitepoint.com/forums/showthread.php?615554-Floating-100-of-Remaining-Width但事实并非如此。我没有固定的宽度，也没有动态 - 左列必须与其内容一样薄，而iframe必须填充所有剩余的空间。 jQuery可以用于这种情况。另外，如果列表的宽度发生了变化，如何检测？

http://jsfiddle.net/trgC3/

Answer 1

尝试使用display: table-cell http://jsfiddle.net/YRTM9/

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

使用以下CSS

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

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

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

.right iframe {
    width: 100%;
}

Answer 2

<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
}

Answer 3

我和那些考虑过桌子的人在一起，但我宁愿只为iframe栏添加width: 100%。这是规范

对于每列，从中确定最大和最小列宽仅跨越该列的单元格。最低要求是最小单元格宽度最大的单元格（或“宽度”列，以较大者为准）。最大值是单元格所需的最大值最大单元格宽度（或“宽度”列，以较大者为准）更大）。

see demo

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

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

3 个答案: