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

回答

相關問題