CSS瓷磚定位

Question

你好我工作的網站上使用的瓷磚這​​樣的：

正如你看到的幾乎一切準備就緒，但有一個瓷磚比別人低。我想把它放在正確的地方，但現在我還沒有想到。我被工作封鎖了，除非它能夠完美地工作。

我的代碼減：

.tile-loop(@index: 1) when (@index <= 6){ 
    .tile-loop(@index + 1); 
    &.t@{index}x1{ 
    width: (@index * @tile-width) + ((@index - 1) * 2 * @tile-margin); 
    height: @tile-height; 
    } 
    &.t@{index}x2{ 
    width: (@index * @tile-width) + ((@index - 1) * 2 * @tile-margin); 
    height: 2 * @tile-height + 2 * @tile-margin; 
    } 
    &.t@{index}x3{ 
    width: (@index * @tile-width) + ((@index - 1) * 2 * @tile-margin); 
    height: 3 * @tile-height + 4 * @tile-margin; 
    } 
    &.t@{index}x4{ 
    width: (@index * @tile-width) + ((@index - 1) * 2 * @tile-margin); 
    height: 4 * @tile-height + 6 * @tile-margin; 
    } 
    &.t@{index}x5{ 
    width: (@index * @tile-width) + ((@index - 1) * 2 * @tile-margin); 
    height: 5 * @tile-height + 8 * @tile-margin; 
    } 
    &.t@{index}x6{ 
    width: (@index * @tile-width) + ((@index - 1) * 2 * @tile-margin); 
    height: 6 * @tile-height + 10 * @tile-margin; 
    } 
} 
.tiles { 
    padding: 40px 0; 
    margin: 0; 
    border-bottom: 1px solid @color-black; 
    .grid { 
     margin-left: -10px; 
     margin-right: -10px; 
     display: block; 
     .tile { 
     float: left; 
     margin: @tile-margin; 
     overflow: hidden; 
     position: relative; 
     .tile-loop(); 
     } 
     .clear { 
     clear: both; 
     display: block; 
     width: 100%; 
     } 
    } 
    } 

HTML：

<div class="tiles"> 
      <div class="grid"> 
       <div class="tile t3x4" style="background: red;"></div> 
       <div class="tile t3x2" style="background: blue;"></div> 
       <div class="tile t3x2" style="background: green;"></div> 
       <div class="clear"></div> 
       <div class="tile t2x3" style="background: red;"></div> 
       <div class="tile t2x1" style="background: blue;"></div> 
       <div class="tile t2x2" style="background: green;"></div> 
       <div class="tile t2x2" style="background: green;"></div> 
       <div class="tile t1x1" style="background: green;"></div> 
       <div class="tile t1x1" style="background: green;"></div> 
      </div> 
     </div> 

請幫助。

Answer 1

解決它是隻是簡單地向上移動的div是出位，用定位方式：

.up { 
    position:absolute; 
    top: -@tile-height; 
} 

然後添加.UP級到你需要動起來

股利

Answer 2

沒有辦法只對CSS做這種佈局。有特殊的JS解決方案：

• http://masonry.desandro.com/
• http://sapegin.github.io/jquery.mosaicflow/

Answer 3

這種類型的佈局被稱爲Masonry layout，砌體是另一個網格佈局，但它會填寫引起元素的不同高度的空白。

jQuery Masonry是jQuery插件之一，用於創建砌體佈局。

或者，您可以使用CSS3 columns。但現在基於jQuery插件是最好的選擇，因爲沒有與CSS3列兼容性問題

DEMO

Answer 4

爲了您的佈局，我會用浮動「列」容器和元素中，你需要這樣，你一定會出現不會是你的結構問題。

基本上我將你的HTML和CSS改變這種（抱歉，沒有less）：

body {margin:0;} 
 
* {box-sizing:border-box;} 
 
.column { 
 
    float:left; 
 
} 
 
.x1 { 
 
    width:calc(50% - 10px); 
 
    margin-right:20px; 
 
} 
 
.x2 { 
 
    width:calc(50% - 10px); 
 
} 
 
.x3 { 
 
    width:calc(33.3333% - 13.33333px); 
 
    margin-right:20px; 
 
} 
 
.x4 { 
 
    width:calc(33.3333% - 13.33333px); 
 
    margin-right:20px; 
 
} 
 
.x5 { 
 
    width:calc(33.3333% - 13.33333px); 
 
} 
 
.t3x4, .t2x3 { 
 
    height:300px; 
 
    margin-bottom:20px; 
 
    width:100%; 
 
} 
 
.t3x2 { 
 
    height:calc(150px - 10px); 
 
    margin-bottom:20px; 
 
    width:100%; 
 
} 
 
.t2x1 { 
 
    height:calc(100px - 10px); 
 
    margin-bottom:20px; 
 
    width:100%; 
 
} 
 
.t2x2 { 
 
    height:calc(200px - 10px); 
 
    margin-bottom:20px; 
 
    width:100%; 
 
} 
 
.t1x1, .right { 
 
    height:calc(100px - 10px); 
 
    margin-bottom:20px; 
 
    width:calc(50% - 10px); 
 
    margin-right:20px; 
 
    float:left; 
 
} 
 
.right {margin-right:0px;}

<div class="tiles"> 
 
    <div class="grid"> 
 
     <div class="column x1"> 
 
      <div class="tile t3x4" style="background: red;"></div> 
 
     </div> 
 
     <div class="column x2"> 
 
      <div class="tile t3x2" style="background: blue;"></div> 
 
      <div class="tile t3x2" style="background: green;"></div>    
 
     </div> 
 
     <div class="clear"></div> 
 
     <div class="column x3">  
 
      <div class="tile t2x3" style="background: red;"></div> 
 
     </div>  
 
     <div class="column x4">  
 
      <div class="tile t2x1" style="background: blue;"></div> 
 
      <div class="tile t2x2" style="background: green;"></div> 
 
     </div>  
 
     <div class="column x5">  
 
      <div class="tile t2x2" style="background: green;"></div> 
 
      <div class="tile t1x1" style="background: green;"></div> 
 
      <div class="tile t1x1 right" style="background: green;"></div> 
 
     </div> 
 
    </div> 
 
</div>

JSFIDDLE例如