使內部div比外部div寬

Question

我有兩個div。外部div的名稱是scroll_main，內部div是scroll_holder。外部div的寬度是750px，溢出設置爲auto。在內部div中，我添加了一些具有固定寬度和高度的div並向左浮動。所以我想使內部div的寬度爲自動，以便內部部分的所有包含div顯示在一行中。我想從左到右滾動。可能嗎？感謝

下面是HTML

<div class="scroll_main"> 
    <div class="scroll_holder"> 
     <div style="width:400px; height:400px; background:#333; float:left; margin:10px"></div> 
     <div style="width:400px; height:400px; background:#999; float:left;margin:10px"></div> 
     <div style="width:400px; height:400px; background:#ccc; float:left;margin:10px"></div> 
     <div style="width:400px; height:400px; background:#22b1b5; float:left;margin:10px"></div> 
     <div style="width:400px; height:400px; background:#333; float:left; margin:10px"></div> 
     <div style="width:400px; height:400px; background:#999; float:left;margin:10px"></div> 
    </div> 
</div> 

這裏我試圖以應用CSS

.scroll_main { 
    height: 450px; 
    margin: 0 auto; 
    max-width: 97%; 
    overflow: auto; 
    position:relative; 

    width:750px 
} 
.scroll_holder{overflow:hidden; margin:5px; width:750px; overflow:auto } 

Answer 1

CSS

.scroll_main { 
    height:450px; 
    margin:0 auto; 
    max-width:97%; 
    overflow:auto; 
    position:relative; 
    width:750px 
} 
.scroll_holder{ 
    margin:5px; 
    white-space:nowrap; 
} 
.scroll_holder div { 
    float:none !important; 
    display:inline-block; 
} 

Codepen Example

Answer 2

選項1

here是什麼，我認爲你正在尋找（雖然更小的尺寸）：

#images { 
    overflow-y:hidden; 
    overflow-x:scroll; 
    height:80px; 
    width:150px; 
    border:solid 1px #c4c4c4; 
} 
#images2 
{ 

    width:300px; 
} 

#images img 
{ 
    display:block; 
    padding:5px; 
    cursor:pointer; 
float:left; 
} 

---

選項2

this演示瞭如何使用這個CSS另一種技術：

div { 
    overflow:hidden; 

} 
#frame { 
    width:600px; 

    padding:8px; 
    border:1px solid black; 
} 
#thumbnails_container { 

    border:1px solid black; 
    padding:4px; 
    overflow-x:scroll; 
     height:200px; 
} 
.thumbnail { 
    border:1px solid black; 
    margin-right:4px; 
    width:100px; height:75px; 
    float:left; 
} 
.thumbnail img { 
    width:100px; height:710px; 
} 

這也讓縮略圖，如果你使用它的圖像。

另一種選擇是使用no-wrap從包裝

Answer 3

研究有關樣式屬性停止的div 溢出-Y和溢出-X，儘量避免用一個DIV固定的寬度或高度絕對位於一個DIV自動或可變的寬度或高度沒有最低高度或定義，兩個DIVS不會顯示在某些瀏覽器（Internet Explorer）:)