加上如下的CSS设置，就是设定好宽度width，然后设置合适的word-wrap和word-break属性：
ul li{width: 100px
word-wrap: break-word
word-break: break-all
white-space: normal
}
ul里面的li折行其实跟其他块状(block)元素的折行都是一样的。以下是相关的CSS属性：
word-warp 属性设置如何处理单词的折行，可以取的值有
word-wrap: normal | break-word
word-break 属性设置如何处理单词折断，仅支持IE，可以取的值有：
word-break: normal | break-all | hyphenate
white-space 属性设置如何处理元素内的空白。可以取的值有：
white-space: normal | nowarp | pre | pre-line | pre-warp | inherit
经测试对中文也有效。
假设图片的宽度为100px,高度为50px那么5张就是500px，如果在加上图片之间的距离，比如每张之间为10px，那么总的宽度就是500px+40px=540px那么你的div宽度可以设置540px；或者更大点也行！我以7张图片为例！
<head><style type="text/css">
div{width:540pxoverflow:hidden}
div img{width:100pxheight:50pxdisplay:blockfloat:leftmargin-left:10px}
div img.first{margin-left:0px}
</style>
</head>
<body>
<div>
<img class="first" src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
<img src="">
</div>
</body>
可以通过浮动来设置，让不同行的两行一个左浮动，一个右浮动，这样，它们就显示在一行了。还有一种方法是所有元素都左浮动，然后指定宽度，让宽度正好是两列的值，那么到两行的时候，它会自动折行。
通过决定定位，分别对没一行文字进行绝对定位，因为是绝对定位，所以可以指定它们到任意位置。position:absolute可以解决这个问题。
