Css 如何避免两个大iFrame的换行？

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

请参阅：

虽然不是完全显示，但您可以使用将它们显示在一行中

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

    display: flex;
    flex-direction: row;
}

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

    display: flex;
    flex-direction: row;
}

---

.

尝试将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上测试：）

尝试将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上测试：）

添加

空白：nowrap；字体大小：0

到包含的

将强制将

彼此相邻地呈现

字体大小：0

删除

底部和容器之间的空白，并且

空白：nowrap

停止浏览器添加分隔符以填充行框

---

或者，您可以删除

字体大小：0

，并将

元素放在标记的同一行上。您仍然需要

空白：nowrap

规则。

添加

空白：nowrap；字体大小：0

到包含的

将强制将

彼此相邻地呈现

字体大小：0

删除

底部和容器之间的空白，并且

空白：nowrap

停止浏览器添加分隔符以填充行框

---

或者，您可以删除

字体大小：0

，并将

元素放在标记的同一行上。您仍然需要

空白：nowrap

规则。

聪明，我没有想到使用

nowrap

-我打算建议使用

宽度：50%

和

浮动：左|右

。聪明，我没有想到使用

nowrap

——我打算建议做

宽度：50%

和

浮动：左|右

@user247245，什么是不够的？这与公认的答案具有相同的基本方法，它解决了所提出的问题。@user247245，什么是不够的？这与公认的答案具有相同的基本方法，并且解决了提出的问题。