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

http://jsfiddle.net/YRTM9/を使用してみてくださいdisplay: table-cell 

<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

私はテーブルについて考えている人たちと一緒に参加していますがwidth: 100%、iframe を使用して列のみを追加したいと思います。スペックはこちら

列ごとに、その列のみにまたがるセルから列の最大幅と最小幅を決定します。最小値は、最大の最小セル幅 (または列の「幅」のいずれか大きい方) を持つセルに必要な値です。最大値は、最大セル幅 (または列の「幅」のいずれか大きい方) を持つセルに必要な値です。

デモを見る

ただし、比率を維持するために iframe が必要な場合は、それを div で囲み、いくつかのハックを使用する必要があります

于 2013-05-07T13:12:58.350 に答える