1

我意识到这是非常基本的，但不能为我的生活工作，为什么我不能让它工作并且花了最后几个小时尝试一切

我需要将 DIV 堆叠起来，使它们形成一个大长柱，一个在另一个之上。它们包含在 JQuery 可滚动 DIV 中。我可以将所有 DIVS 绝对定位在里面，但是它们的负载会经常变化，所以如果我必须插入一个新的，它们会自动排列。

所以我基本上有一个大的可滚动 DIV。在这里面我有 2 个其他 DIV（#Release-Monsters 和 #Release-Insides），每个 DIV 都包含 3 个进一步的 DIV。我想将这 2 个 DIV（#Release-Monsters 和 #Release-Insides）堆叠在一起形成一列。一旦我有这两个工作，我会增加大约 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

为每个 * 添加一个浮点属性*秒。例如：

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

我会将您的 html 更改为从无序列表开始，以摆脱您拥有的所有 br 标签，并可能使其更整洁。

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

我查看了您的 HTML（除了 list 和 之外还不错<br>）和您的 CSS（过于复杂）。

我清理了一些东西，你会在以下位置看到结果：

http://jsfiddle.net/audetwebdesign/42bgv/

主要的 CSS 修复

这是我修改的 CSS：

.All-Releases {
    position: relative;
    left: 20px;
    top: 0px;
    width:600px;
    height: auto;
    color: #CCC;
    font-size: 12px;
    font-family: Century Gothic, Geneva, sans-serif;
    outline: 2px dotted blue;
}
.Release-Monsters {
    position: relative;
    width:600px;
    height:322px;
    outline: 2px dotted gray;
}

...

.Release-Insides {
    position: relative;
    width:600px;
    height:322px;
    outline: 2px dotted gray;
}

...

最初，您声明absolute的位置.All-Releases导致所有面板相互重叠，不好。

对于Release-Monsters和Release-Insides，使用position: relative这样绝对定位的元素会停留在您期望的位置。（注意：有更简单的方法可以在不使用绝对定位的情况下执行此操作）。

最后，使用class而不是id因为id值被认为是唯一的。

此外，在本例中，利用 CSS 级联并将字体和颜色声明保留在顶级规则.All-Releases中。

于 2013-04-09T19:42:03.350 回答