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-class添加到你需要向上移动的div

Answer 2

只有 CSS 无法进行这种布局。有专门的JS解决方案：

Answer 3

这种布局称为Masonry layout，Masonry 是另一种网格布局，但它会填充因元素高度不同而造成的空白。

jQuery Masonry 是创建砌体布局的 jQuery 插件之一。

或者，您可以使用 CSS3 columns。但目前基于 jQuery 的插件是最佳选择，因为与 CSS3 列

存在兼容性问题

DEMO

Answer 4

对于您的布局，我会使用浮动 "columns" 容器和您需要的元素内部，这样您就可以确保不会出现结构问题。

基本上我会把你的 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 示例

CSS 瓷砖定位

CSS tiles positioning

html

css

less