2

2つのiframeを強制的にcolsとして表示する必要がありますが、cssで実行できますか？

コード例：

<!-- if I inc width to "800", the iframes should still be as cols, (regardless of window size) !-->
<div style="width:100%;overflow-x:scroll;">
<iframe width="200" height="200" src="http://www.slashdot.net"></iframe>
<iframe width="200" height="200" src="http://freshmeat.net"></iframe>
</div>

参照してください：http： //jsfiddle.net/7rCSu/

4

3 に答える 3

3

white-space:nowrap;font-size:0包含に追加する<div>と、<iframe>sが互いに隣接してレンダリングされます。

は、 sの下部とコンテナの間の空白を削除し、ブラウザが行ボックスを埋めるために区切りを追加するのをfont-size:0停止します。<iframe>white-space:nowrap

または、をドロップして、マークアップの同じ行に要素をfont-size:0配置することもできます。ただし、ルールは<iframe>まだ必要です。white-space:nowrap

于 2013-03-08T08:55:01.797 に答える
1

ラップしないようにdivを設定してみてください。

<div style="width:100%;overflow-x:scroll;white-space: nowrap;">
<iframe width="800" height="200" src="http://www.slashdot.net"></iframe>
<iframe width="800" height="200" src="http://freshmeat.net"></iframe>
</div>

（Firefoxでテスト済み：http：//jsfiddle.net/7rCSu/2/）

于 2013-03-08T08:54:18.890 に答える
0

クロスブラウザとの完全な互換性はありませんが、CSSフレキシブルボックスを使用して単一の行に表示できます。

div {
    display: -webkit-flex;
    -webkit-flex-direction: row;

    display: flex;
    flex-direction: row;
}

JSFiddle。

于 2013-03-08T08:54:15.090 に答える