0

我正在尝试让一系列 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 显示在另一个之下。

4

4 回答 4

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

于 2012-11-30T13:09:53.953 回答
0

将CSS更改为以下，

.comic_panel{

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

他们应该并排倒下。

基本上子 div 与 parent 具有相同的宽度，因此它们没有空间并排坐着。

演示

于 2012-11-30T13:12:10.163 回答
0

原因是每个内部 div (.comic_panel) 都使用了父容器 (#comic) 的所有宽度。然后，下一个 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 属性（如小提琴中所示，但不是最佳方法）或通过 javascript（更好的方法）。

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

顺便说一句，您可能不需要position: relative放在那里的东西来达到这种效果。

于 2012-11-30T13:20:10.633 回答
0

将整个内容放入容器 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 的大小应该与之前的“comic”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;
}
于 2012-11-30T13:24:09.990 回答