我正在尝试使用 CSS 创建不规则的网格布局。到目前为止,这是我的 Jfiddle:
代码:
HTML:
<div style="width:275px;">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box4"></div>
<div class="box" id="box5"></div>
<div class="box" id="box3"></div>
<div class="box" id="box6"></div>
</div>
CSS:
.box { margin: 2px; float:left; }
#box1 { height: 86px; width: 80px; background-color: red;}
#box2 { height: 42px; width: 161px; background-color: green;}
#box3 { height: 42px; width: 80px; background-color: blue;}
#box4 { height: 86px; width: 80px; background-color: orange;}
#box5 { height: 129px; width: 80px; background-color: yellow;}
#box6 { height: 42px; width: 161px; background-color: brown;}
我想做的是向上移动蓝色 block (在红色 block 的正下方),这将允许棕色 block 向左和向上移动。下面是它当前的外观与我正在尝试做的事情的对比图。
希望这是足够的信息,如果您需要更多信息,我很乐意澄清。我知道像素略有偏差,它大约是我正在寻找的大小的四分之一,所以我将所有像素定义除以 4,这导致了一些我忽略的小数(并导致线条不能完美匹配)。
最佳答案
“脏”解决方案,边距为负,但是...
.box { margin: 2px; float:left; }
#box1 { height: 86px; width: 80px; background-color: red;}
#box2 { height: 42px; width: 161px; background-color: green;}
#box3 { height: 42px; width: 80px; background-color: blue;margin-top:-87px;}
#box4 { height: 86px; width: 80px; background-color: orange;}
#box5 { height: 129px; width: 80px; background-color: yellow;}
#box6 { height: 40px; width: 163px; background-color: brown;margin-top:-42px;}
关于html - CSS:不规则网格布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22546149/