如何强制浮动不换行
看看以下代码,可以强制浮动的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也不行,所以也觉得很奇怪。暂时先记下吧。希望以后能彻底明白。
