Html 为什么这个图像库超过了它的div？

我正在修改一个HTML/CSS模板。另外，我正在使用一个预制的图像库，这很长。这两个库是由不同的设计师开发的。我不知道为什么图像库超过了它自己的div，并且与页脚的div重叠。我确信图片库有问题，因为如果我放一张大图片，它不会超过页脚。如何解决此问题并将图像库限制为主体

以下是图像库的HTML代码：

<div class="photo">
<ul class="topic">

    <li><a class="set" href="#Birds">Birds<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]-->

        <ul style="left: 0; top: 31px; height: 750px">

            <li><a href="#bird1"><img src="http://www.cssplay.co.uk/menu/lbox/bird1.jpg" alt="" title="" /></a></li>
            <li><a href="#bird2"><img src="lbox/bird2.jpg" alt="" title="" /></a></li>

        </ul>

    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
</ul>
<br class="clear" />
</div>

以下是图像库的CSS：

<style type="text/css">
/* common styling */

a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}

/* slides styling */

.photo {width:635px; text-align:left; position:relative; margin:0 auto;}

.photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;}

.photo ul.topic li {display:block; width:125px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:124px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}

.photo ul.topic li a ul, 
.photo ul.topic li ul 
{display:none;}

.photo ul.topic li.active a
{color:#000; background:#bbb;}

.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}

.photo ul.topic li.active ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #bbb; z-index:1;}

.photo ul.topic li a:hover ul, 
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #aaa; z-index:100;}

.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}

.photo ul.topic li ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}

.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}

.photo ul.topic li a:hover ul li a:hover, 
.photo ul.topic li:hover ul li a:hover 
{white-space:normal; position:relative;}

.photo ul.topic li a:hover ul li a:hover img, 
.photo ul.topic li:hover ul li a:hover img 
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}
</style>

用于图像库的JSFIDLE：

以下是我的页脚代码：

<div class="wrapper col7">
  <div id="copyright">

  <div class="list-group" style="float:left">

  <a class="list-group-item" href="" target="_blank"><i class="fa fa-linkedin-square fa-5x fa-cog-li"></i></a>


</div>  
   <br/> <p>Desgined by <a href="" target="_blank"></a></p>
    <div class="clear"></div>
  </div>
</div>

下面的屏幕截图解释了我没有把我的页面完整代码放进去的问题，因为它太乱了：

---

我不确定这是否是您想要的，但试试这个

我认为您可以通过使用overflow:scroll来克服这个问题，这样它就不会重叠。根据上面的提琴，图像与另一个图像重叠，因此可以使用overflow:hidden，如下所示

 a:hover {text-decoration:none; overflow:hidden;}

我已编辑您的小提琴，请检查一次->

检查此更新的小提琴->

---

转到flowers选项卡，我添加了overflow:scroll，所以所有图像都将位于div本身。

根据Q1。它添加了滚动条，因此它占用了一些空间，使您的div ti缩小了一点，因此您可以增加

.photo ul.topic li.active ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:484px; padding:40px 60px; border:20px solid #bbb; z-index:1;}

.photo ul.topic li a:hover ul, 
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:484px; padding:40px 60px; border:20px solid #aaa; z-index:100;}

如上图所示，我已将其从464更改为484

问题2。屏幕大小取决于您的div宽度和高度，最好使用%而不是像素。我已将宽度像素更改为70%检入小提琴下方

第三季度。如果手动增加div内任何组件的大小，div大小也会扩展，如果div大小很小，为了更好地克服这一问题，可以使用类似

max-width: 100%;
height: auto;

如果“最大宽度”属性设置为100%，则图像将在必要时缩小，但决不会放大到大于其原始大小

正如您所说，使用%将是一个好主意，因此您最好根据%而不是像素设置页面，易于更改，并且如果您尝试手动增加大小，页面也不会超过其大小

检查这把小提琴

我不确定，但这可能对你有用

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
if ( $(window).width() > 739) {     
//nothing happens
}
else {
//write an error message like, alert("screen size is less");
}

---

更多信息请参见：

Thx，但这不是我的意思。fiddle只显示图像库和其中的图像，所有图像都工作正常，并且它们之间没有重叠。问题是，整个图像库超出了div，并与页脚重叠。我更新了帖子并给出了问题的屏幕截图。是的，正确，我明白了，因此你必须使用你代码中发生的事情，随着图像的增加，div大小也会因为ul而增加，所以如果你用溢出限制ul，它不会越过边界，检查这个fiddle->go for flower我添加了更多图像并添加了溢出，所以它的高度会在今天晚些时候给出反馈。非常感谢。成功了。但也存在一些问题：1。添加滚动条，为图片添加额外的右边距，每行将有3张图片，而不是4张。我怎样才能解决这个问题？2.如何根据屏幕大小使所有图像库响应？我希望它占屏幕宽度和高度的70%。若屏幕很小，则显示一条消息。3.但我仍然无法理解：如果我手动增加大小并使其变大，为什么它会超过其div？我怎样才能防止这种情况？再次感谢您的有用解决方案。非常感谢。我会试试这些，然后再给你回复。你能告诉我，我如何限制屏幕的大小吗？也就是说，我不希望屏幕如此之小的访问者能够看到画廊页面，相反，他们会收到一条消息。我该怎么做？如果您将页面宽度和高度设置为100%，如果访客屏幕也很小，将得到一个与您设置的屏幕大小相同的滚动窗口。。在什么意义上说，你们的意思是放大、缩小或更改浏览器？你们能在这里回答我吗？考虑编辑问题和创建一个小提琴或片段，以便于回答的人，这样我所要做的就是编辑并发送给你。