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

只能在CSS上进行这种布局。有特殊的JS解决方案：

Answer 2

这种类型的布局称为Masonry layout，砌体是另一种网格布局，但它会填充由元素高度差异引起的空白。

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

或者，您可以使用CSS3 columns。但是现在基于jQuery的插件是最好的选择，因为CSS3列存在兼容性问题

DEMO

Answer 3

解决问题的一种方法是简单地使用定位向上移动不合适的div：

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

然后将.up-class添加到需要向上移动的div中

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

CSS瓷砖定位

4 个答案: