浮动：在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; 
}