Question

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

但是当我转到绝对位置时，我最初找不到160px。

代码：

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

Answer 1

默认情况下，像div一样的'block'元素将与其容器一样宽。

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

由于你的图像是最宽的东西并且它们是浮动的，它们最终会被垂直堆叠，最终的宽度是160px。

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

Answer 2

我有解决方案感谢上帝。我需要更改max-width：690px到width：690px，max-width：100％;设计是正确的。

流体设计和位置绝对

2 个答案: