浮動：在div上不工作，因爲它應該

Question

我正在嘗試使一系列DIV元素並排坐在一起。 Howeever我遇到的問題

HTML：

<div id="comic" class="comic"> 

     <div class="comic_panel">1</div> 
     <div class="comic_panel">2</div> 
     <div class="comic_panel">3</div> 
     <div class="comic_panel">4</div> 
     <div class="comic_panel">5</div> 
     <div class="comic_panel">6</div> 
     <div class="comic_panel">7</div> 
     <div class="comic_panel">8</div> 
     <div class="comic_panel">9</div> 
     <div class="comic_panel">10</div> 
     <div class="comic_panel">11</div> 
     <div class="comic_panel">12</div> 
     <div class="comic_panel">13</div> 
     <div class="comic_panel">14</div> 


     </div> 

CSS：

#comic{ 
    height: 563px; 
    width: 1000px; 
    background: black; 
    margin: auto; 
    color:white; 
    position:relative; 
    overflow:auto; 
} 


.comic_panel{ 

    width:1000px; 
    height:563px; 
    position:relative; 
    float:left; 
    background:orange; 

} 

但是結果我得到的僅僅是尼思彼此下顯示的DIV。

Answer 1

您的div太寬而無法在容器中並排放置。如果你想爲一個滾動條顯示，對孩子使用white-space:nowrap;在容器上和display:inline-block

.comic_panel{ 

    width:200px; 
    height:563px; 
    position:relative; 
    float:left; 
    background:orange; 

} 

：嘗試給他們的200px的寬度。

這裏是一個演示：http://jsfiddle.net/h2StP/show

Answer 2

更改CSS下面，

.comic_panel{ 

    width:6%; 
    height:563px; 
    position:relative; 
    float:left; 
    background:orange; 
border:1px solid red; 
} 

，他們應該通過側降邊。

基本上子div的寬度與父母相同，所以沒有空間讓他們坐在一起。

DEMO

Answer 3

的原因是，每個內的div（.comic_panel）使用（#comic）父容器的所有寬度。然後，下一個div只能放在前一個div的下面。

如果你調整了寬度，你可以得到你的結果。 http://jsfiddle.net/

body { 
    width: auto; 
    overflow: auto; 
    width: 10000px; 
} 

#comic{ 
    height: 563px; 
    background: black; 
    margin: auto; 
    color:white; 
    overflow: visible; 
} 


.comic_panel{ 
    border: 1px solid black; 
    width:100px; 
    height:63px; 
    float:left; 
    background:orange; 

}​ 

爲了使內部的div不換行，你需要或者設定的寬度： 例如，如果你讓div容器有任何寬度，則可以通過將側都內的div側通過硬編碼的寬度CSS屬性（如在小提琴中，但不是最好的方法）或通過JavaScript（更好的方法）來將body元素設置爲合適的值（爲所有內部div創建空間）。

本文解釋了其他方法，使用表格：http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/。

順便說一句，你可能不需要position: relative，你放在那裏來達到這個效果。

Answer 4

把整個事情到一個容器DIV這樣的：

<div id="container"> 
     <div id="comic" class="comic"> 
      <div class="comic_panel">1</div> 
      <div class="comic_panel">2</div> 
      <div class="comic_panel">3</div> 
      <div class="comic_panel">4</div> 
      <div class="comic_panel">5</div> 
      <div class="comic_panel">6</div> 
      <div class="comic_panel">7</div> 
      <div class="comic_panel">8</div> 
      <div class="comic_panel">9</div> 
      <div class="comic_panel">10</div> 
      <div class="comic_panel">11</div> 
      <div class="comic_panel">12</div> 
      <div class="comic_panel">13</div> 
      <div class="comic_panel">14</div> 
     </div> 
    </div> 

容器DIV應該是大小爲你的「漫畫」 DIV是相同之前：

#container { 
    height: 563px; 
    width: 1000px; 
    overflow: auto; 
} 

而且寬度你的'漫畫'div應該是14000.

#comic{ 
    height: 563px; 
    width: 14000px; 
    background: black; 
    margin: auto; 
    color:white; 
    position:relative; 
    overflow:auto; 
}