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删除 s 底部<iframe>和容器之间的空白空间，并停止white-space:nowrap浏览器添加中断以填充行框。

或者您可以删除font-size:0并将<iframe>元素放在标记中的同一行。不过，您仍然需要white-space:nowrap规则。

Answer 2

尝试将 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/）

Answer 3

虽然不完全跨浏览器兼容，但您可以使用CSS 灵活框将它们显示在单行中。

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

    display: flex;
    flex-direction: row;
}

JSF中。