0

我希望有很多可点击的图像来覆盖浏览器窗口的宽度。所以两边都没有空间。理想情况下，单个图像的大小应保持在 180x180 像素，但如果更容易，它们可以根据浏览器窗口更改大小。只需要填满空间。目前，如果我使包含的 div 大于主体，它会在右侧创建空间溢出。如果这是有道理的。

这是我的代码：- http://jsfiddle.net/ZPTBB/

这就是我希望它看起来的样子：- http://www.karen.hunter.myzen.co.uk/pinewood/image_so.jpg

也许它需要查询？？？？

提前谢谢你的帮助。

我的代码：-

            <!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>Untitled Document</title>
            <style>
            /* Editable Multiple Image Area */
            .image-container {width:100%; margin:0; padding:0; height:360px; overflow:hidden;}
            .image{position:relative;float:left;width:188px;height:188px; margin:0; padding:0;}
            .image img {position:absolute;z-index:1;left:0;top:0;}
            .image:hover div {display:block!important; }
            .image img:hover div {display:none;position:absolute;z-index:2; width:100%; height:100%; background:red;}
            .hoverimg {display:none;position:absolute;z-index:2; width:100%; height:100%; background:red;}
            </style>
            </head>

            <body>
            <!-- IMAGE CONTAINER -->
                  <div class="image-container">
                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>


                       <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>

                        <div class="image">
                            <img src="http://www.placehold.it/188x188" />
                            <div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
                        </div>
                  </div><!-- IMAGE CONTAINER -->
            </body>
            </html>
4

1 回答 1

0

添加一些可以包含溢出图像的额外容器：

.image-container {
    width:100%; 
    height:360px; 
    overflow:hidden;
}
.image-container-overflow {
    width: 100%; 
    padding-right:187px; /* assuming 188px width for image */
    height: 360px; 
    position: relative;
}
.image-container-actual {
    width: 100%; 
    height: 360px; 
    position: absolute;
    top: 0; 
    left: 0
}

第一个通过 padding 占用 100% + 187px，下一个通过绝对定位占用这个总数

http://jsfiddle.net/willemvb/pq26W/

于 2013-10-25T09:08:38.837 回答