css - 如何避免两个大 iframe 的换行？

Question

两个 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/

Answer 1

添加white-space:nowrap;font-size:0到包含 <div>将强制<iframe> s 彼此相邻渲染。

font-size:0删除 <iframe> 底部之间的空白s 和容器以及 white-space:nowrap停止浏览器添加中断来填充行框。

或者您可以删除 font-size:0并输入 <iframe>标记中同一行的元素。您仍然需要white-space:nowrap但规则。