是否可以使用CSS浮动和堆叠项目？

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;
}

Answer 2

您应该创建一个单独的DIV（问题数据5），您将在其中放置这两个div（位数据1 和位数据2 ）

Answer 3

我猜你可以使用负边距移动第二位，但你必须确保其height和源顺序始终相同。

jSFiddle link

Answer 4

如果您改变主意并希望使用 javascript ，我强烈推荐jQuery Masonry。