Question

我有一个div容器，宽度为150px div有一个表，其宽度是可变的，其内容是图像列表如果图像列表的大小大于150px，则＆lt; td＆gt;将打破一条新线如何在不破坏的情况下将图像列表保持在一行？我们的代码可以在chrome上运行，但它不适用于IE9 以下是我的HTML代码。

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>test</title>

        <style text="text/css">
            .thumbnail{
                float:left;                
            }

            .NoBreak{ 
                white-space:nowrap;
                word-break:keep-all 
            }
        </style>        
    </head>
    <body>
        <div style='width:150px;overflow:hidden;border:1px solid #ff0000;'>
            <table border='1' cellspacing='0' cellpadding='0'><tr height='40'><td nowrap class='NoBreak'>
                <img src='b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/>
                <img src='b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/>
                <img src='b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/>
                <img src='b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/>
                <img src='b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/>
                <img src='b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/>
                <img src='b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/>
                <img src='b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/>
                <img src='b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/>
                <img src='b1347546434941/s1347546434942/1209135051ed48bc89d.jpg' class='thumbnail' width='30' height='40'/>
            </td></tr></table>    
        </div>    
    </body>
</html>

如何在不破坏的情况下将图像列表保持在一行？

0 个答案: