css - 是否可以仅使用 CSS float 和堆叠元素？

Question

我想看看不使用 JavaScript 和 CSS 是否可行。我有一个 div 中的元素列表。有些元素的高度是其他元素的 1/2，我希望它们堆叠起来。没有为两位添加另一个容器元素，因为我不能改变结构，它只是一个div列表。此外，可以有多个论文(即，列表可以是其中的 20 个，随机设置 1/2 高度和正常高度)最终结果应如下所示:

HTML 结构是:

<div id="issues">
    <div class="item issue">issue data 1</div>        
    <div class="item issue">issue data 2</div>            
    <div class="item bit">bit data 1</div>
    <div class="item bit">bit data 2</div>
    <div class="item issue">issue data 3</div> 
    (... can have repeating bits or issues here ...)           
</div>

我目前使用的 CSS 不起作用:

.item {
    border: 1px solid red;
    float: right;
    margin: 5px;
}
.issue {
    width: 100px;
    height: 200px;
}
.bit {
    width: 100px;
    height: 90px;
}

我目前得到:

这是版本:http://jsfiddle.net/kSgtY/

Answer 1

通常我不会使用这种方法，但是因为你:

• 无法更改标记
• 不会使用javascript
• 具有固定的高度和宽度...

您可以使用绝对定位。通过使用 + 相邻选择器和 :first-child 我们可以单独定位元素:

Demo here .

我添加的CSS:

.issues {
    position:relative;
}
.issue, .bit {
    position:absolute;  
}
.issue:first-child {
    left:330px;
}
.issue:first-child + .issue {
    left:220px;  
}
.bit {
    left:110px;
    top:110px;  
}
.issue:first-child + .issue + .bit {
    top:0;
}