Question

我正在修改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>

图片库的jsfiddle：

https://jsfiddle.net/dexoey/opzwksmz/

以下是我的页脚代码：

<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>

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

Answer 1

我不确定这是你想要的，但试试这个......

我认为你可以通过使用overflow：scroll来克服这个问题，所以它不会重叠。根据您的上述小提琴，图像与另一个图像重叠，因为您可以使用overflow：hidden，就像这样...

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

我编辑了你的小提琴，检查一次 - ＆gt; https://jsfiddle.net/opzwksmz/3/

检查这个更新的小提琴 - ＆gt; https://jsfiddle.net/opzwksmz/5/ 去花卉选项卡，我添加了溢出：滚动，所以所有图像将位于你的div本身。

Answer 2

按照Q1。它增加了滚动条，所以它占用了一些空间，使你的div收缩一点，所以你可以增加宽度

.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，如上所示。

Q2。屏幕大小基于div宽度和高度，使用％代替像素是一个很好的做法。我已将宽度像素更改为70％以下的小提琴。

Q3。如果你手动增加div内任何组件的大小，div大小也会扩大，如果div大小很小，为了更好地克服这个，你可以使用类似的东西。

max-width: 100%;
height: auto;

如果max-width属性设置为100％，则图像将缩小（如果必须），但不会向上扩展到大于其原始大小。

正如你所说使用％将是个好主意，所以你最好根据％而不是像素设置你的页面，容易改变，如果你试图手动增加它也不会超过它的大小。

检查此问题https://jsfiddle.net/opzwksmz/8/

我不确定，但这对你有用..

<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");
}

详情请见：http://www.coalmarch.com/blog/how-to-execute-javascript-based-on-screen-size-using-jquery#sthash.zJp7JwAt.dpuf

为什么这个图库超过了div？

2 个答案: