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。

以下是演示：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的正下方。

如果调整宽度，可以获得结果。例如，如果你让容器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-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;
}

浮动：留在div上不能正常工作

4 个答案: