如何将Div中的几张图片强制在一行内显示?
如题用word-wrap可以使文字强制在一行内，但怎么让图片强制在一行内啊？假设我的DIV容器是400的宽度，而5张图片一共加起来是500PX的宽度，对图片使用了floa...
如题 用word-wrap可以使文字强制在一行内，但怎么让图片强制在一行内啊？ 假设我的DIV容器是400的宽度，而5张图片一共加起来是500PX的宽度，对图片使用了float属性后，图片就会强制换行，怎么让他不换行，而保留在400PX款的容器里啊,并且要让最后一张图片保留在其中，但是可以不可见.(这里不能用隐藏属性让它隐藏起来）
我知道用css sprite技巧可以做，但是我想用单独的效果去做一个用JS去控制它的小特效，把图片合成一张图片后，我想做的这个东西就没发实现了！！
麻烦好心的人告诉下嘛 就是不知道怎么弄这个！！ 展开
我知道用css sprite技巧可以做，但是我想用单独的效果去做一个用JS去控制它的小特效，把图片合成一张图片后，我想做的这个东西就没发实现了！！
麻烦好心的人告诉下嘛 就是不知道怎么弄这个！！ 展开
4个回答
展开全部
告诉你一种方法，你在图片的外层加一个500px宽度的div，然后用那个400px的层套用这个500px的div，在400px的层加上属性overflow:hidden即可！
给你个例子：
<div style="width:400px; overflow:hidden;">
<ul style="width:500px;">
<li><img src="/Desktop/Global SPUG-.png"/></li>
<li><img src="/Desktop/Global SPUG-.png"/></li>
<li><img src="/Desktop/Global SPUG-.png"/></li>
<li><img src="/Desktop/Global SPUG-.png"/></li>
<li><img src="/Desktop/Global SPUG-.png"/></li>
</ul>
</div>
给你个例子：
<div style="width:400px; overflow:hidden;">
<ul style="width:500px;">
<li><img src="/Desktop/Global SPUG-.png"/></li>
<li><img src="/Desktop/Global SPUG-.png"/></li>
<li><img src="/Desktop/Global SPUG-.png"/></li>
<li><img src="/Desktop/Global SPUG-.png"/></li>
<li><img src="/Desktop/Global SPUG-.png"/></li>
</ul>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不晓得LZ原来怎么写的。
我写了下，不知道LZ用的上不
head内容：
<style type="text/css">
*{padding:0px;margin:0px;}
/*容器div*/
div{width:400px;height:auto;overflow:hidden;}/*容器宽度400px。超出部分隐藏。*/
ul{width:1000px;list-style-type:none;}/*ul宽度=图片总宽度*/
ul li{float:left;display:block;width:200px;height:200px;}/*li标签左浮动，宽度高度等于每个图片的宽度高度*/
ul li img{width:200px;height:200px;}/*图片宽度高度我这里暂时定义200px*/
</style>
body内容：
<!--容器里面放了4张图片，换成你自己的路径。总宽度是1000px-->
<div>
<ul>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li></ul></div>
img图片我很少见直接并排使用，一般都放到某一个元素中。
我写了下，不知道LZ用的上不
head内容：
<style type="text/css">
*{padding:0px;margin:0px;}
/*容器div*/
div{width:400px;height:auto;overflow:hidden;}/*容器宽度400px。超出部分隐藏。*/
ul{width:1000px;list-style-type:none;}/*ul宽度=图片总宽度*/
ul li{float:left;display:block;width:200px;height:200px;}/*li标签左浮动，宽度高度等于每个图片的宽度高度*/
ul li img{width:200px;height:200px;}/*图片宽度高度我这里暂时定义200px*/
</style>
body内容：
<!--容器里面放了4张图片，换成你自己的路径。总宽度是1000px-->
<div>
<ul>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li>
<li><img src="" /></li></ul></div>
img图片我很少见直接并排使用，一般都放到某一个元素中。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!--其实很简单，只需在外面的div限制宽度400，高度固定，加上overflow:hidden;属性，内部再放一个500宽的，高度固定的div，多出来的100像素就不出来，在这个div里面放满500px的图片，就OK了-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div style="width:400px; height:300px; overflow:hidden;">
<div style="width:500px; height:300px;">
<img width="100" height="300" /><img width="100" height="300" /><img width="100" height="300" /><img width="100" height="300" /><img width="100" height="300" /></div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div style="width:400px; height:300px; overflow:hidden;">
<div style="width:500px; height:300px;">
<img width="100" height="300" /><img width="100" height="300" /><img width="100" height="300" /><img width="100" height="300" /><img width="100" height="300" /></div>
</div>
</body>
</html>
本回答被提问者采纳
已赞过
已踩过<
你对这个回答的评价是？
展开全部
把图片 作在li里 让后 在css里 用float:left；就可以了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
