如何强制浮动不换行

  看看以下代码,可以强制浮动的img标签不换行,拷贝下面代码试试看。由于需要这个效果,所以搜索出了下面的代码。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Side Scrolling Gallery</title>
<style type="text/css">
#slide-wrap {
    width: 550px; 
    height:300px;
    margin:0 auto;
    overflow: auto;
    border:1px solid #000;
}
#inner-wrap {
    float:left;
    margin-right:-999em;
    padding-left:20px;
}
img {
    float:left;
    width:200px;
    height:200px;
    background:blue;
    color:#FFF;
    margin:20px 20px 0 0;
}
</style>
</head>
<body>
    <div id="slide-wrap">
        <div id="inner-wrap">
            <img src="images/img1.jpg" width="200" height="200" alt="Test Image">
            <img src="images/img2.jpg" width="200" height="200" alt="Test Image">
            <img src="images/img2.jpg" width="200" height="200" alt="Test Image">
            <img src="images/img2.jpg" width="200" height="200" alt="Test Image">
        </div>
    </div>
</body>
</html>

看了下代码,最主要的特别代码是  margin-right:-999em;看了这个,并不是很理解,这里为什么要这么设呢?如果设置该div的宽度足够宽可以可以,不过在横向拖动的时候,会出现图片后面有很多空白,试了下padding也不行,所以也觉得很奇怪。暂时先记下吧。希望以后能彻底明白。

版权所有©摇太阳网站 鄂ICP备09010653号
Copyright By Email:mail@yaotaiyang.com