CSS浮动、移位、清除

我想浮动我的项目列表，并从第二个项目创建一个移动效果

如何避免第二项之后的“清除”行为

.shift{
浮动：对；
宽度：50%；
高度：50px；
背景：蓝色；
}
.项目{
浮动：左；
宽度：50%；
高度：200px；
背景：红色；
}

这里的问题很简单

---

是否可以只使用CSS来实现这一点？

您应该查看jQuery插件。使用纯css（afaik）无法获得所需的效果

你应该这么做

$('#masonry-container').masonry();

---

我正在制作一把小提琴供大家展示。

这里是我发现的一个JSFIDLE示例：（不是由myslef制作的）

如果您的盒子是静态的（因此设置了高度），您可以使用此方法。如果盒子的大小与内容有关，那么解决问题的唯一方法就是使用类似的插件

div.box {
box-shadow: 0 0 1px black inset;
height: 100px;
float: left;
 width: 100px;
background-color: #0f0;
}

.unique {
background-color: #00f !important;
height: 200px !important;
color: #fff;
}