讓孩子自動展開水平滾動div

我有我想要的here，但是我必須手動輸入寬度。我想有一個父容器，可容納包含子div的可伸縮div。父容器是固定大小的。我需要可伸展的div大到足以水平包含子div。將可伸縮div設置爲寬度自動不起作用，我不想手動設置大小。除了手動設置尺寸外，還有其他選擇嗎？讓孩子自動展開水平滾動div

#parent{ 
    width:50%; 
    height:200px; 
    background:red; 
    overflow-x: scroll; 
    overflow-y: hidden; 
} 

#stretchable-div{ 
    background:darkblue; 
    /* width: 600px; works but don't want to manually size*/ 
    width: auto; 
} 

.child { 
    background:blue; 
    width: 100px; 
    height: 150px; 
    float:left; 
}

來源

2012-05-29 michaellindahl

如果您需要製作可伸展的div自動寬度，它必須由它的孩子決定。這與兒童的浮動屬性衝突（浮動行爲由其父寬度決定）。所以你必須改變父母的寬度或孩子的浮動。

我可以使用顯示：內聯塊和NOWRAP屬性使chidlren在單行中。但是你必須在IE7下破解內聯塊。示例爲here。

現在找不到一個很好的解決方案。只是給它一個提示。

來源

2012-05-29 03:55:41

This works great！ IE顯示什麼？ – michaellindahl

@michaellindahl，IE7及以下版本不支持顯示內嵌塊。那些div只是放在垂直列中。看到這個問題http://stackoverflow.com/questions/2061942/problem-with-csss-display-inline-block-and-ie7 –

讓孩子自動展開水平滾動div

回答

相關問題