Question

我有一个使用MAMP开发的网站，在我的本地主机上，它运行良好;但是，当我将其上传到服务器时，width:auto停止了工作。通过停止工作，我的意思是它没有包装像它使用的所有元素。现在，而不是一行gallery-image，宽度匹配父元素。

这是HTML：

<div id="gallery-wrapper">

        <div id="gallery-images">

             <?php foreach($content1 as $img) : ?>
                <div class="gallery-image-holder">
                    <a class="gallery-image" href="<?php echo "/images/".$img['url'];?>"> <img src="<?php echo "/images/".$img['url'];?>" /></a>
                </div>
            <?php endforeach;?>

        </div>
    </div>

这是CSS：

#gallery-wrapper{
    width:37em;
    height:11em;
    overflow: hidden;
    padding-top: 1.5em;
    float:left;

}
#gallery-images{
    display: inline-block;
    width:auto;
    height:11em;
    overflow-x: hidden;
    margin-right: .5em;
    position:relative;
    padding:0 !important;

}

.gallery-image-holder{
    display: inline-block;
    width:12.5em;
    height:11em;
    margin:.25em;
    overflow: hidden;
}

Answer 1

我能建议的最好的事情是这样的。

current = $(#gallery-wrapper).innerWidth()
$(#gallery-wrapper).css('width',auto)
new = $(#gallery-wrapper).innerWidth()
$(#gallery-wrapper).css('width',current+"px")
$(#gallery-wrapper).animate({'width':new},speed)

有更好的解决方案，但这就是我要做的。如果你想切换它可能会变得非常混乱，因为这必须反向完成，并且必须解决当前状态。

为什么不宽度：自动工作

1 个答案: