[样@式作业 2009年10月12日]如何实现内容块不换行

此题原形出自csdn.net论坛

 

想做到让最外边的 div.wrap 内部不论有多少div（宽/高为100px，1px的边框）都不换行，并且撑开div.wrap，请问有什么办法？

就是说实现下面的效果：

■■■■■■■■■■■■■■■■...........

这样就不行了：

■■■■■■■■■■

■■■■■■

要求兼容性：ie6/7/8，ff3，opera 9+

 

结构：

<div> <div><p>div的内容要换行。</p></div> <div><p>div的内容要换行。</p></div> <div><p>div的内容要换行。</p></div> <div><p>div的内容要换行。</p></div> <div><p>div的内容要换行。</p></div> <!--div是不定数量的--> </div>

如果对内部的div设定float，当浮动元素填满父元素宽度的时候，会折行。 CSS 2.1中，display有很多值 ，但是由于部分浏览器（主要是IE 6）不支持而长期被忽视了。

 

提示：也可以参见《别具光芒：CSS属性、浏览器兼容与网页布局》一书中《9.2 显示类型：display属性》一节。

 

下面介绍两种实现的方法：

方法1：display: inline-block

“inline-block（行内块）”是CSS 2.1增加的一个值，“inline-block”类型的元素产生块框，但是却又具有行内元素的特性，例如可以像行内元素一样在一行内显示，又可以可以设定宽度和高度等（块级元素），其表现比较类似一个行内替换元素。 因此可以设定CSS如下：

.wrap { white-space:nowrap; } .wrap div { border:1px solid; display:inline-block; height:100px; overflow:hidden; width:100px; }

“white-space:nowrap;”将强制在同一行内显示所有文本，直到文本结束或者遭遇br元素，因此wrap的内容不会回行。

 

注意：《别具光芒：CSS属性、浏览器兼容与网页布局》123页《7.8 空白：white-space属性》小节，语法表中[继承]一项错误，应该为 “继承”

有些浏览器并不支持“inline-block”，例如IE 7.0-和Firefox 2.0-。 对于IE，对行内元素设定“display: inline-block;”，例如：

span { display: inline-block; }

这样会触发IE内部的“hasLayout”属性，从而使行内元素拥有了“inline-block”类型元素的某些表现。 而IE中直接设定块级元素“display: inline-block;”是达不到预期效果的，而需要如下设定：

.wrap div { display:inline-block; /* 先使用display:inline-block属性触发hasLayout属性 */ …… } .wrap div { display:inline; /* 再定义display:inline，让块元素呈递为行内元素 */ }

注意：此处display:inline-block和display:inline要分开写，而不能合并，这也是IE的一个Bug。

对于Firefox，虽然可以使用其私有属性“display: -moz-inline-box;”来模拟此效果，但是由于这个私有属性会产生其他问题，因此不推荐使用。 因此完整的CSS如下：（查看示例文件。 ）

.wrap { white-space:nowrap; } .wrap div { border:1px solid; display:inline-block; height:100px; overflow:hidden; width:100px; } .wrap div { *display:inline; } .wrap div p { white-space:normal; }

此种方法比较简单，但是由于对源代码中的空格浏览器处理方法不一样，会造成内部div之间的间距不等，本例未处理此问题。 产生此间距的原因，是标签之间的空格——元素标签间的空格和制表符会被压缩为1个空格显示，而对于这些空格的处理，浏览器存在差异。删除内部div之间的空格，可以解决问题。

方法2：display:table-cell

display:table-cell：将元素作为表格单元格显示。 也就是让这些div都变成一行内的单元格，所以不会回行。（查看示例文件。 ）

.wrap { display:table; } .wrap div { border:1px solid; display:table-cell;} .wrap div p{ height:100px; margin:0; padding:0; width:100px; }

此种方法对于支持display:table-cell的浏览器，效果是统一的，但是对于table-cell类型的元素，在css的应用上有很多限制，例如margin无效、宽度和高度受同行和同列的其他单元格影响等。

 

提示：也可以参见《别具光芒：CSS属性、浏览器兼容与网页布局》一书中《第11章 表格》。

但是此方法可以实现内部div的等高，即不设定高度，高度由内容决定，同一行的div等高。 同时，此方法对于IE 7-无效，因此针对IE 7- 还是要使用方法1。