div+css 怎么隐藏 多出图片的部分啊 5
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#main{
position:relative;
margin-left:auto;
margin-right:auto;
width:560px;
}
#leftdiv {
float:left;
margin:0;
padding:0;
}
#rightdiv {
float:right;
margin:0;
padding:0;
}
#leftarrow{
cursor:pointer;
}
#component{
position:relative;
visibility:visible;
background-color:#BBB;
float:left;
overflow:hidden;
}
#carousel {
position:relative;
overflow:hidden;
}
#carousel ul {
position:absolute;
width:10000px;
margin:0 auto;
z-index:1;
}
#carousel ul li {
list-style-type:none;
float:left;
overflow:hidden;
}
#carousel ul li img {
width:120px;
height:120px;
}
</style>
</head>
<body>
<div id="main">
<div id="leftdiv"><img alt="Left3-disabled" id="leftarrow" src="images/left3-disabled.gif" /></div>
<div id="component">
<div id="carousel">
<ul>
<li><img alt="Image1" src="images/image1.jpg" />Image 1</li>
<li><img alt="Image2" src="images/image2.jpg" />Image 2</li>
<li><img alt="Image3" src="images/image3.jpg" />Image 3</li>
<li><img alt="Image4" src="images/image4.jpg" />Image 4</li>
<li><img alt="Image5" src="images/image5.jpg" />Image 5</li>
<li><img alt="Image6" src="images/image6.jpg" />Image 6</li>
<li><img alt="Image7" src="images/image7.jpg" />Image 7</li>
<li><img alt="Image8" src="images/image8.jpg" />Image 8</li>
<li><img alt="Image9" src="images/image9.jpg" />Image 9</li>
<li><img alt="Image10" src="images/image10.png" />Image 10</li>
<li><img alt="Image11" src="images/image11.png" />Image 11</li>
<li><img alt="Image12" src="images/image12.png" />Image 12</li>
<li><img alt="Image13" src="images/image13.png" />Image 13</li>
<li><img alt="Image14" src="images/image14.png" />Image 14</li>
<li><img alt="Image15" src="images/image15.png" />Image 15</li>
<li><img alt="Image16" src="images/image16.png" />Image 16</li>
<li><img alt="Image17" src="images/image17.png" />Image 17</li>
</ul>
</div>
</div>
<div id="rightdiv"><img alt="Right3-enabled" id="next-arrow" src="images/right3-enabled.gif" /></div>
</div>
</body>
</html> 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#main{
position:relative;
margin-left:auto;
margin-right:auto;
width:560px;
}
#leftdiv {
float:left;
margin:0;
padding:0;
}
#rightdiv {
float:right;
margin:0;
padding:0;
}
#leftarrow{
cursor:pointer;
}
#component{
position:relative;
visibility:visible;
background-color:#BBB;
float:left;
overflow:hidden;
}
#carousel {
position:relative;
overflow:hidden;
}
#carousel ul {
position:absolute;
width:10000px;
margin:0 auto;
z-index:1;
}
#carousel ul li {
list-style-type:none;
float:left;
overflow:hidden;
}
#carousel ul li img {
width:120px;
height:120px;
}
</style>
</head>
<body>
<div id="main">
<div id="leftdiv"><img alt="Left3-disabled" id="leftarrow" src="images/left3-disabled.gif" /></div>
<div id="component">
<div id="carousel">
<ul>
<li><img alt="Image1" src="images/image1.jpg" />Image 1</li>
<li><img alt="Image2" src="images/image2.jpg" />Image 2</li>
<li><img alt="Image3" src="images/image3.jpg" />Image 3</li>
<li><img alt="Image4" src="images/image4.jpg" />Image 4</li>
<li><img alt="Image5" src="images/image5.jpg" />Image 5</li>
<li><img alt="Image6" src="images/image6.jpg" />Image 6</li>
<li><img alt="Image7" src="images/image7.jpg" />Image 7</li>
<li><img alt="Image8" src="images/image8.jpg" />Image 8</li>
<li><img alt="Image9" src="images/image9.jpg" />Image 9</li>
<li><img alt="Image10" src="images/image10.png" />Image 10</li>
<li><img alt="Image11" src="images/image11.png" />Image 11</li>
<li><img alt="Image12" src="images/image12.png" />Image 12</li>
<li><img alt="Image13" src="images/image13.png" />Image 13</li>
<li><img alt="Image14" src="images/image14.png" />Image 14</li>
<li><img alt="Image15" src="images/image15.png" />Image 15</li>
<li><img alt="Image16" src="images/image16.png" />Image 16</li>
<li><img alt="Image17" src="images/image17.png" />Image 17</li>
</ul>
</div>
</div>
<div id="rightdiv"><img alt="Right3-enabled" id="next-arrow" src="images/right3-enabled.gif" /></div>
</div>
</body>
</html> 展开
3个回答
展开全部
给图片外面的div一个隐藏溢出的样式，overflow:hidden;
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
#component设置固定的宽高；
放图片的div #component 设置overflow：hidden；
放图片的div #component 设置overflow：hidden；
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你那么多图片地址都是本地的，我们复制后根本没法用
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
