CSS float，shift，clear

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/