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例如