为什么这个图片库超过它的div？ [英] why this image gallery exceeds its div?

问题描述

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

以下是图片库的HTML代码：

$ b如何修复此问题并将图片库限制在主体？ $ b

 < div class =photo> 
< ul class =topic> 
 
< li>< a class =sethref =＃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.jpgalt =title =/>< / a>< / li> 
< li>< a href =＃bird2>< img src =lbox / bird2.jpgalt =title =/>< / a& li> 
 
< / ul> 
 
<！ -  [if lte IE 6]>< / td>< / tr>< / table>< / a><！[endif]  - > ; 
< / li> 
< / ul> 
< br class =clear/> 
< / div> 
  

以下是Image Gallery的CSS：

 < style type =text / css> 
 / *常见样式* / 
 
a {color：＃000;} 
a：hover {text-decoration：none;} 
a：visited {color：＃000 ;} 
 
 / * slides styling * / 
 
 .photo {width：635px; text-align：left;位置：相对; margin：0 auto;} 
 
 .photo ul.topic {padding：0; margin：0; list-style：none; width：635px; height：auto;位置：相对; 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;颜色：＃000; text-decoration：none; border：1px solid #fff; border-width：1px 1px 0 0;背景：#ccc; font-family：verdana，arial，sans-serif;} 
 
。照片ul.topic li a ul，
 .photo ul.topic li ul 
 {display：none; } 
 
 .photo ul.topic li.active a 
 {color：＃000; background：#bbb;} 
 
。照片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;背景：#ddd; width：464px; padding：40px 60px; border：20px solid #bbb; z-index：1;} 
 
。照片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;背景：#ddd; width：464px; padding：40px 60px; border：20px solid #aaa; z-index：100;} 
 
。照片ul.topic li ul li 
 {display：inline; width：112px; height：87px; float：left; border：1px solid #fff; margin：1px;} 
 
。照片ul.topic li ul li a 
 {display：block; width：110px; height：85px; cursor：default; float：left; text-decoration：none;背景：＃444; border：1px solid＃888;} 
 
 .photo ul.topic li ul li a img 
 {display：block; width：100px; height：75px; border：5px solid #eee;} 
 
。照片ul.topic li a：hover ul li a：hover，
 .photo ul.topic li：hover ul li a hover 
 {white-space：normal; position：relative;} 
 
。照片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 for Image Gallery：

a href =https://jsfiddle.net/dexoey/opzwksmz/ =nofollow noreferrer> https://jsfiddle.net/dexoey/opzwksmz/

以下是我的页脚代码：

 < div class =wrapper col7> 
< div id =copyright> 
 
< div class =list-groupstyles =float：left> 
 
< a class =list-group-itemhref =target =_ blank>< i class =fa fa-linkedin-square fa-5x fa-cog- li>< / i>< / a> 
 
 
< / div> 
< br /> < p>想要由< a href =target =_ blank>< / a>< / p> 
< div class =clear>< / div> 
< / div> 
< / div> 
  

下面的截图解释了这个问题（我没有给我的页面的完整代码，因为它太乱了）：

解决方案

它添加了滚动条，所以它占据一些空间，这使你的收缩一点，所以你可以增加

的宽度

  .photo ul.topic li.active ul 
 {display：block; position：absolute; left：0; top：31px; list-style：none; padding：0; margin：0; height：375px;背景：#ddd; width：484px; padding：40px 60px; border：20px solid #bbb; z-index：1;} 
 
。照片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;背景：#ddd; width：484px; padding：40px 60px; border：20px solid #aaa; z-index：100;} 
  

我已将其从464更改为484， p>

Q2。屏幕尺寸基于你的div宽度和高度，它是一个很好的做法，使用％而不是像素。我已将宽度像素更改为70％，在下面检查。

Q3。如果你手动增加div内部任何组件的尺寸，div尺寸也会扩展，如果div尺寸较小，为了克服这个问题，你可以使用像...这样的东西。

  max-width：100％; 
 height：auto; 
 

如果max-width属性设置为100％，则图像将缩小

正如你所说的使用％会是个好主意，所以你最好根据％而不是像素来设置页面

检查此FIDDLE https://jsfiddle.net/opzwksmz/8/

我不确定，但这可能适合你。

 < script src =// ajax.googleapis.com/ajax/libs/jquery /1.9.0/jquery.min.js\"</script> 
 if（$（window）.width（）> 739）{
 //没有发生
} 
 else {
 //写错误信息， alert（screen size is less）; 
} 
  

查看更多： http://www.coalmarch.com/blog/how -to-execute-javascript-based-on-screen-size-using-jquery＃sthash.zJp7JwAt.dpuf

I´m modifying an HTML/CSS template. Also, I´m using a premade Image Gallery, which is lengthy (these two have been developed by different designers). I don´t know why the Image Gallery exceeds it´s own div, and overlaps with div of footer. I´m sure that there is something wrong with the image gallery, cause if I put a large picture instead, it wont exceed the footer. How can I fix this issue and limit the image gallery to the main body?

Following is HTML code of the image gallery:

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

Following is Image Gallery´s 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 for Image Gallery:

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

Following is my footer´s code:

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

And following screenshot explains the problem (I havent put full code of my page because its too messy):

解决方案

As per Q1. It adds scroll bar, so it occupies some space which makes your div ti shrink a little, so you can increase the width of

.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;}

i have changed it from 464 to 484 as shown above.

Q2. Screen size is based on your div width and height, its a good practice to use % instead of pixel. I have changed width pixel to 70% check in below fiddle.

Q3. If you increase the size manually of any component which is inside div, the div size also expands, if the div size is small, to overcome this better you use something like..

max-width: 100%;
height: auto;

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size.

As you said using % will be good idea, so better you set you page according to % instead of pixel, easy to change, and it wont exceed its size also if you try to increase the size manually.

CHECK THIS FIDDLE https://jsfiddle.net/opzwksmz/8/

I am not sure , but this may work for you..

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

See more at: http://www.coalmarch.com/blog/how-to-execute-javascript-based-on-screen-size-using-jquery#sthash.zJp7JwAt.dpuf

这篇关于为什么这个图片库超过它的div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！