CSS float 、移位、清除

Question

我想 float 我的元素列表并从第二个元素创建一个移动效果。

如何避免第二个 .item 之后的“清除”行为？

.shift {
    float: right;
    width: 50%;
    height: 50px;
    background: blue;
}

.item {
    float: left;
    width: 50%;
    height: 200px;
    background: red;
}

<div class="container">

    <div class="shift"></div>    

    <div class="item"></div>    
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>    

</div>

这里非常简单fiddle .

是否可以仅使用 CSS 来实现？

Answer 1

您应该查看 jQuery 插件 Masonry .使用纯 css (afaik) 不会获得预期的效果。

你应该做的

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

我正在制作 fiddle 给你看。