如何防止浮动的div元素在浏览器重新resize时打包?

当浏览器被重新resize时,如何让DIV的左边相邻的浮动不被换行,使得视口变小?

div { float: left; } 

例如,当浏览器被完全最大化时, div就像这样排队:

 |div| |div| |div| |div| |div| |div| |div| |div| 

但是,当浏览器重新resize这种情况发生:

 |div| |div| |div| |div| |div| |div| |div| |div| 

当浏览器重新变小时,如何让div不能换行?

把它们包裹在另一个div中,它指定了宽度(或者最小宽度)。

 <div class="parentContainer"> <div class="floater"></div> <div class="floater"></div> <div class="floater"></div> </div> .parentContainer { /* The width of the parent needs to be equal to the total width of the children. Be sure to include margins/padding/borders in the total. */ width: 600px; overflow: auto; } 

它也有助于在包含div上自动指定溢出:允许其高度匹配子浮点数。

我对比赛已经很晚了,但是这里是我发现的作品:

假设您的导航结构为:

 <nav> <ul> <li><a href="#">Example Link</a></li> <li><a href="#">Example Link</a></li> <li><a href="#">Example Link</a></li> </ul> </nav> 

为了让它显示链接内联,没有包装,你可以简单地使用:

 nav ul { white-space: nowrap; } nav ul li { display: table-cell; } 

没有固定的宽度或任何要求。

小提琴: http : //jsfiddle.net/gdf3prb4/

让容器div围绕它们

 .container { width: 500px; white-space: nowrap; overflow: visible/hidden/scroll - whichever suits you; } 

我意识到讨厌桌子是很时髦的,但它们可以是有用的。
http://jsfiddle.net/td6Uw/
而不是浮动的div,把它们放在一个表中,并包裹大小受限的div表。 TR将防止包装。
另外,我在TD中使用了DIV,使得单元格造型更加简单。 如果你花时间,你可以devise风格,但是我发现它们很难风格化,通常只能使用我的小提琴所采用的DIV-in-TD方法。

其实很简单。 代码示例:

 Element { white-space: nowrap; } 
 .parent{ white-space: nowrap; } .floater{ float: left; display:inline-block; } 

也应该做的伎俩。 没有宽度要求。