0

想象一下这个网站：

[list][     iframe     ]

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

http://jsfiddle.net/trgC3/

4

3 回答 3

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%;
}
于 2013-05-07T11:36:56.530 回答
1 
<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
}
于 2013-05-07T11:49:00.133 回答
1

我支持那些考虑表格的人，但我宁愿width: 100%只为带有 iframe 的列添加。这是规格

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

看演示

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

于 2013-05-07T13:12:58.350 回答