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

その理由は、各内部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をラップしないようにするには、ハードコードされたwidth cssプロパティ（フィドルのように、ただし、最良のアプローチ）またはjavascript（より良いアプローチ）を介して。

この投稿では、テーブルを使用して他のアプローチについて説明します：http ://css-tricks.com/how-to-create-a-horizo​​ntally-scrolling-site/ 。

position: relativeところで、この効果を達成するためにそこに置く必要はないかもしれません。

于 2012-11-30T13:20:10.633 に答える
0

CSSを以下に変更します。

.comic_panel{

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

そしてそれらは並んで落ちるはずです。

基本的に、子divは親と同じ幅であるため、並べて座る余地はありません。

デモ

于 2012-11-30T13:12:10.163 に答える
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 は、以前の「コミック」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 に答える