如何避免兩個大iframe的換行符？

兩個iframe應該被強制顯示爲cols，可以用css來完成嗎？如何避免兩個大iframe的換行符？

示例代碼：

<!-- 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/

來源

2013-03-08 Teson

添加white-space:nowrap;font-size:0與含<div>將迫使 s到接下來要呈現給對方。

font-size:0刪除 s的底部和容器之間的空白區域，並且white-space:nowrap停止瀏覽器添加中斷以填充線框。

或者您可以刪除font-size:0並將元素放在標記中的同一行上。儘管如此，你仍然需要white-space:nowrap規則。

來源

2013-03-08 08:55:01 andyb

聰明，我沒有想到使用'nowrap'-我會建議做'寬度：50％;'和'浮動：左|右'。 – Dai 2013-03-08 08:58:13

甜蜜，謝謝！ so4ever。 – Teson 2013-03-08 09:03:24

雖然沒有完全cross-browser compatible，您可以使用CSS flexible boxes在一行中顯示它們。

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

    display: flex; 
    flex-direction: row; 
}

JSFiddle。

來源

2013-03-08 08:54:15 MarcoK

嘗試設置在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-08 08:54:18

或者，您可以指定DIV的像素寬度。這也有效... – 2013-03-08 08:56:23

試過，還不夠，謝謝。 – Teson 2013-03-08 09:04:11

@ user247245，什麼是不夠的？這與被接受的答案具有相同的基本方法，並且解決了所提出的問題。 – 2013-03-08 09:09:59

如何避免兩個大iframe的換行符？

回答

相關問題