您好，我正在开发使用如下图 block 的网站:
如您所见，几乎所有东西都已准备就绪，但有一 block 地砖比其他地砖低。我想把它放在正确的位置，但现在我什么也没想。而且我的工作受阻，除非它能完美地工作。
我的代码更少:
.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>
请帮忙。
最佳答案
仅靠 CSS 无法实现这种布局。有专门的JS解决方案:
关于html - CSS 瓦片定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32822539/