Css 流体设计和绝对位置_Css_Position

Css 流体设计和绝对位置

css

Css 流体设计和绝对位置,css,position,Css,Position,这是一个流体设计的四个图像（宽度=160px）与ul或浮动div。调整窗口大小时一切正常。它是流动的但当我转到一个绝对位置时，我发现最初没有更多的160px 你可以看到这里的问题代码：正文{位置：相对；} .集装箱{ /*删除注释以查看问题*/ /*位置：绝对；左侧：0；顶部：0*/ 保证金：0；填充：0；边框：黑色1px实心；最大宽度：690px；溢出：隐藏； } galleryItem先生{ 浮动：左；宽度：23%；利润率：0.1%；填充：1%0； } .gall

这是一个流体设计的四个图像（宽度=160px）与ul或浮动div。调整窗口大小时一切正常。它是流动的

但当我转到一个绝对位置时，我发现最初没有更多的160px

你可以看到这里的问题

代码：


正文{位置：相对；}
.集装箱{
/*删除注释以查看问题*/
/*位置：绝对；左侧：0；顶部：0*/
保证金：0；
填充：0；
边框：黑色1px实心；
最大宽度：690px；
溢出：隐藏；
}
galleryItem先生{
浮动：左；
宽度：23%；
利润率：0.1%；
填充：1%0；
}
.galleryItem img{最大宽度：100%；}
ul{列表样式：无；}
拇指{
/*删除注释以查看问题*/
/*位置：绝对；左侧：0；顶部：100px*/
显示：块；
保证金：0；
填充：0；
边框：黑色1px实心；
最大宽度：690px；溢出：隐藏；
}
ul.拇指>李{
显示：块；
浮动：左；
宽度：23%；
利润率：0.1%；
填充：1%0；
}
ul.拇指>李img{
显示：块；
最大宽度：100%；
}





/*jQuery 1.5.1支持IE9，但不支持1.5.0*/
$（函数（）{//文档已准备就绪
/*警报（$（'ul.thumbs'）.outerWidth（true））*/
});

默认情况下，“块”元素（如div）与其容器一样宽

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

因为你的图像是最宽的，并且它们是浮动的，它们最终被垂直堆叠，得到的宽度是160px

也许你可以用绝对定位来详细说明你的意图，这样我们可以帮助你更多。

感谢上帝，我有了解决方案。我需要将最大宽度：690px更改为宽度：690px，最大宽度：100%；设计将是正确的

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