Question

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

如何在第二个.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();

我正在为你演示一个小提琴。

Answer 2

这是我发现的一个jsfiddle示例：http://jsfiddle.net/m3b6k/1/（不是由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;
}

如果你的盒子是静态的（所以设定的高度），你可以使用这种方法。如果框的大小与其内容是动态的，解决问题的唯一方法是使用像http://masonry.desandro.com/这样的插件

CSS浮动，移位，清除

2 个答案: