浮动：divs上的左栏无法正常工作

Question

我试图使一系列DIV元素并排放置。 但是我遇到了问题

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;

}

但是，我得到的结果仅仅是DIVS在彼此之间显示。

Answer 1

您的div太宽，无法并排放置在容器中。 尝试给他们一个200px的宽度：

.comic_panel{

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

}

如果要显示滚动条，请使用white-space:nowrap; 在容器上并在子display:inline-block上display:inline-block 。

这是一个演示： 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的宽度与父div相同，因此它们没有空间可以并排放置。

演示

Answer 3

原因是每个内部div（.comic_panel）都使用父容器（#comic）的所有宽度。 然后，下一个div只能放在前一个div的正下方。

如果调整宽度，则可以得到结果。 例如，如果让容器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不换行，您需要通过硬编码的宽度css属性（如小提琴中那样）将body元素的宽度设置为适当的值（以为所有内部div留出空间）。最佳方法）或通过javascript（更好的方法）。

这篇文章使用表格说明了其他方法： http : //css-tricks.com/how-to-create-a-horizo​​ntally-scrolling-site/ 。

顺便说一句，您可能不需要position: relative放置在此处的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;
}