1

これは非常に基本的なことだと思いますが、私の人生ではうまくいかず、なぜそれがうまくいかず、最後の数時間すべてを試してみました

DIV を積み重ねて、大きな長い列を形成する必要があります。これらは、JQuery のスクロール可能な DIV 内に含まれています。すべての DIVS を内部に絶対配置することはできますが、かなり定期的に変更されるものがたくさんあるため、新しいものを挿入する必要がある場合に自動的に整列するシステムが必要です。

だから私は基本的に 1 つの大きな Scrollable DIV を持っています。この中に、他に 2 つの DIV (#Release-Monsters と #Release-Insides) があり、それぞれにさらに 3 つの DIV が含まれています。この 2 つの DIV (#Release-Monsters と #Release-Insides) を積み重ねてコラムを形成したいと考えています。これら2つが機能したら、約50個以上追加します。

私のCSSはこれです：

#All-Releases- {
    position:absolute;
    left:250px;
    top:210px;
    width:600px;
    height:600px;
    z-index:3;
}
/* Used to control height of scrollable div*/
p.ex
{
height:600px;
width:100px;
}
 /* Vertical and horizontal scrollbar - one extra step required - add width of overview - overall width of scrolled content*/
#All-Releases- {
     width: 500px;
        }
#Release-Monsters {
    position:static;
    width:600px;
    height:322px;
    z-index:3;
    }
#Artwork-Monsters {
    position:absolute;
    left:19px;
    top:2px;
    width:284px;
    height:284px;
    z-index:3;
}
#Release-Title-Monsters {
    position:absolute;
    left:322px;
    top:0px;
    width:284px;
    height:284px;
    color: #CCC;
    font-size: 18px;
    font-family: Century Gothic, Geneva, sans-serif;
    letter-spacing: 2px;
    text-align: justify;
    z-index:3;
}
#Release-Info-Monsters {
    position:absolute;
    left:322px;
    top:25px;
    width:278px;
    height:284px;
    color: #CCC;
    font-size: 12px;
    font-family: Century Gothic, Geneva, sans-serif;
    letter-spacing: 1px;
    text-align: justify;
    z-index:3;
}
#Release-Insides {
    display:block;
    width:600px;
    height:322px;
    z-index:3;
    }
#Artwork-Insides {
    position:absolute;
    left:19px;
    top:2px;
    width:284px;
    height:284px;
    z-index:3;
}
#Release-Title-Insides {
    position:absolute;
    left:322px;
    top:0px;
    width:284px;
    height:284px;
    color: #CCC;
    font-size: 18px;
    font-family: Century Gothic, Geneva, sans-serif;
    letter-spacing: 2px;
    text-align: justify;
    z-index:3;
}
#Release-Info-Insides {
    position:absolute;
    left:322px;
    top:25px;
    width:278px;
    height:284px;
    color: #CCC;
    font-size: 12px;
    font-family: Century Gothic, Geneva, sans-serif;
    letter-spacing: 1px;
    text-align: justify;
    z-index:3;
}

HTMLは次のとおりです。

<div id="All-Releases-" class="default-skin demo">
<div id="Release-Monsters">
<div id="Artwork-Monsters"><img src="images/Release-Artwork/Monsters.jpg" width="284" height="284" /></div>
<div id="Release-Title-Monsters">MONSTERS</div>
<div id="Release-Info-Monsters">
1. Prologue<br />
2. Journey <br />
3. Candles <br />
4. Water <br />
5. Underwater <br />
6. Spores <br />
7. Campfire <br />
8. Dawn <br />
9. Attack <br />
10. Temple <br />
11. Encounter <br />
12. Monsters Theme 
    </div></div>
<div id="Release-Insides">
<div id="Artwork-Insides"><img src="images/Release-Artwork/Insides.jpg" width="284" height="284" /></div>
<div id="Release-Title-Monsters">INSIDES</div>
<div id="Release-Info-Insides">
1. The Wider Sun <br />
2. Vessel <br />
3. Insides <br />
4. Wire <br />
5. Colour Eye <br />
6. Light Through The Veins <br />
7. The Low Places <br />
8. Small Memory <br />
9. A Drifting Up <br />
10. Autumn Hill<br />
    </div></div>

<p class="ex"></p>

</div>

    <div id="All-Releases-" class="default-skin demo">
<div id="Release-Monsters">
<div id="Artwork-Monsters"><img src="images/Release-Artwork/Monsters.jpg" width="284" height="284" /></div>
<div id="Release-Title-Monsters">MONSTERS</div>
<div id="Release-Info-Monsters">
1. Prologue<br />
2. Journey <br />
3. Candles <br />
4. Water <br />
5. Underwater <br />
6. Spores <br />
7. Campfire <br />
8. Dawn <br />
9. Attack <br />
10. Temple <br />
11. Encounter <br />
12. Monsters Theme 
    </div></div>
<div id="Release-Insides">
<div id="Artwork-Insides"><img src="images/Release-Artwork/Insides.jpg" width="284" height="284" /></div>
<div id="Release-Title-Monsters">INSIDES</div>
<div id="Release-Info-Insides">
1. The Wider Sun <br />
2. Vessel <br />
3. Insides <br />
4. Wire <br />
5. Colour Eye <br />
6. Light Through The Veins <br />
7. The Low Places <br />
8. Small Memory <br />
9. A Drifting Up <br />
10. Autumn Hill<br />
    </div></div>

<p class="ex"></p>

</div>
<script type="text/javascript">
    $(window).load(function () {
        $(".demo").customScrollbar();
    });
</script

>

4

3 に答える 3

0

あなたが持っているすべての br タグを取り除くために、最初に順序付けられていないリストを持つようにあなたの html を変更し、少しきれいにすることができるかもしれません。

JSFiddle

例: http://jsfiddle.net/uk3BW/ <-- スクロールバーなし

例: http://jsfiddle.net/uk3BW/1/ <-- スクロールバーあり

HTML

<ul id="Release-Info-Monsters">
<li> Prologue </li> 
<li> Journey </li>
<li> Candles </li>
<li> Water </li>
<li> Underwater </li>
<li> Spores </li>
<li> Campfire </li>
<li> Dawn </li>
<li> Attack </li>
<li> Temple </li>
<li> Encounter </li>
<li> Monsters Theme </li>
</ul>

CSS

ul { 
 display:block;  
 background:#aeaeae;
 padding:10px;
 width: 250px;
 list-style:none;
}

li { 
    display:block;
    background:#eee; 
    padding: 10px 0; 
    width: 100%;
    text-align:center;
}

li:last-child { 
margin: 0;
}

li { 
    margin: 0 0 10px 0;} 
li:hover { 
    background:#ccc;
}
于 2013-04-09T19:03:02.990 に答える
0

* のそれぞれに float プロパティを追加します。*s。例えば：

#Artwork-Monsters {
    position:absolute;
    float:left;
    left:19px;
    top:2px;
    width:284px;
    height:284px;
    z-index:3;
}
于 2013-04-09T18:43:49.727 に答える