CSS：动态宽度div

我正在编码一个滑块，并且我对容器的样式有问题。CSS：动态宽度div

我有3 div：

甲div，设置在滑块
的容器div与所有的内容的div的宽度和高度（和滑块滚动）
许多div每个显示不同的内容

我想要做的是在第二个div上应用负边距s隐藏内容。

JS：

function animate(element) { 
    var start = new Date(); 
    var id = setInterval(function() { 
    var timePassed = new Date() - start; 
    var progress = timePassed/600; 
    if (progress > 1) progress = 1; 
    element.style.marginLeft = -50 * Math.pow(progress, 5)+"px"; 
    if (progress == 1) { 
     clearInterval(id); 
    } 
    }, 10); 
}

CSS

.example_path { 
    overflow: hidden; 
    width: 50px; 
    height: 50px; 
    } 
    .example_block { 
    min-width: 100px; 
    height: 50px; 
    float:left; 
    } 
    .example_in_block { 
    width: 50px; 
    height: 50px; 
    float:left; 
    }

HTML

<div class="example_path"> 
    <div class="example_block" onclick="animate(this)"> 
    <div class="example_in_block" style="background-color:blue;"></div> 
    <div class="example_in_block" style="background-color:pink;"></div> 
    <div style="clear:both;"></div> 
    </div> 
</div>

问题： .example_block的宽度必须完全相同或超过（内容量div的大小.example_block * 50 [内容div的宽度大小]）才能正常工作。

例如，如果我将.example_block的宽度尺寸设置为90，则粉红色div将低于蓝色div，而不是其旁边。

我想容器div是动态的，所以我不必设置具体的宽度大小。

我该怎么做？

来源

2011-11-16 some Folk

请简单介绍ehat你想用div的做（如如何你希望它是动态的 - 你会通过JavaScript的两个div的的改变宽度） –

@tunetosuraj你可以看到在主题顶部给出的现场示例中，我不知道怎么做，我想将容器边距改为负边距 –

不与负边距。您可以在其中一个外部DIV上设置填充。

此外，最小宽度不会与旧版本的IE向后兼容。

检查这个例子：http://jsfiddle.net/5xBYN/6/

如果初始定位好，然后你可以使用你的容器DIV顶级负值（第三DIV），左，右或底部，以实现滑动。

更新：

也许这更接近你想要的。 http://jsfiddle.net/5xBYN/7/

我还不确定你要做什么。也许编辑我发布的小提琴，并更新你的问题，如果有什么我会发生错误。

来源

2011-11-16 10:18:09 Matthew

第二个div是容器（example_block类） –

只需删除.example_block中的float：left。

见http://jsbin.com/efuyix/9/edit

来源

2011-11-16 12:16:44

CSS：动态宽度div

回答

相关问题