1

这是四个图像（宽度 = 160px）的流畅设计，带有 ul 或浮动 div。调整窗口大小时一切都很好。它是流动的。

但是当我传递到一个绝对位置时，我最初发现不再有 160px。

你可以在这里看到问题http://jsfiddle.net/zXDH9/

代码：

<html>
<head>
    <style>
        body { position:relative; }
        .container {
            /* remove comment to view problem */
            /*position:absolute; left:0; top:0;*/
            margin: 0;
            padding: 0;
            border: black 1px solid;
            max-width: 690px;
            overflow: hidden;
        }
        .galleryItem {
            float: left;
            width: 23%;
            margin: 0 1%;
            padding: 1% 0;
        }
        .galleryItem img { max-width: 100%; }
        ul { list-style: none; }
        ul.thumbs  {
            /* remove comment to view problem */
            /*position: absolute; left:0; top: 100px;*/
            display: block;
            margin: 0;
            padding: 0;
            border: black 1px solid;
            max-width:690px; overflow: hidden;
        }
        ul.thumbs>li {
            display: block;
            float: left;
            width: 23%;
            margin: 0 1%;
            padding: 1% 0;
        }
        ul.thumbs>li img {
            display: block;
            max-width: 100%;
        }
    </style>
</head>
<body>
    <div class="container"> 
        <div class="galleryItem"><a href="#"><img src="http://www.e-business.tn/focus/images/galleria/hobs/thumbs/F.801X_mini.jpg" alt="" /></a></div>
        <div class="galleryItem"><a href="#"><img src="http://www.e-business.tn/focus/images/galleria/hobs/thumbs/F.802X_mini.jpg" alt="" /></a></div>
        <div class="galleryItem"><a href="#"><img src="http://www.e-business.tn/focus/images/galleria/hobs/thumbs/F.801W_mini.jpg" alt="" /></a></div>
    </div>
    <ul class="thumbs">
        <li class=""><a href="#"><img src="http://www.e-business.tn/focus/images/galleria/hobs/thumbs/F.801X_mini.jpg" alt="" /></a></li>
        <li class=""><a href="#"><img src="http://www.e-business.tn/focus/images/galleria/hobs/thumbs/F.802X_mini.jpg" alt="" /></a></li>
        <li class=""><a href="#"><img src="http://www.e-business.tn/focus/images/galleria/hobs/thumbs/F.801W_mini.jpg" alt="" /></a></li>
    </ul>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">/*jQuery 1.5.1 Supports IE9, but not 1.5.0*/</script>
    <script>
        $(function(){ // Document is ready
            /*alert($('ul.thumbs').outerWidth(true));*/
        });
    </script>   
</body>
</html>
4

2 回答 2

1

默认情况下，像 div 这样的“块”元素将与其容器一样宽。

当您将元素的位置设置为 Absolute 时，您会将其从布局流中移除并删除“与其容器一样宽”属性 - 它会缩小以包含其内容。

由于您的图像是那里最宽的东西并且它们是浮动的，因此它们最终会垂直堆叠并且最终宽度为 160 像素。

也许您可以通过绝对定位详细说明您的意图，以便我们为您提供更多帮助。

于 2012-08-13T16:54:14.177 回答
-1

我有解决方案感谢上帝。我需要将 max-width: 690px 更改为 width: 690px, max-width: 100%; 设计将是正确的。

于 2012-08-14T15:40:19.510 回答