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>彼此相邻呈现。

font-size:0删除<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

虽然不完全cross-browser compatible，但您可以使用CSS flexible boxes将它们显示在一行中。

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

    display: flex;
    flex-direction: row;
}

JSFiddle

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

3 个答案: