CSS:不规则网格布局 [英] CSS: Irregular Grid Layout

问题描述

我正在尝试使用CSS创建不规则的网格布局.到目前为止，这是我的Jfiddle:

脏"解决方案，边距为负，但是...

  .box {边距:2px;向左飘浮;}#box1 {高度:86像素；宽度:80px；背景颜色:红色；}#box2 {高度:42像素；宽度:161像素；背景颜色:绿色；}#box3 {高度:42px;宽度:80px；background-color:蓝色； margin-top:-87px；}#box4 {高度:86px;宽度:80px；背景颜色:橙色；}#box5 {高度:129px;宽度:80px；背景颜色:黄色；}#box6 {高度:40px;宽度:163px；background-color:棕色； margin-top:-42px；} 

I'm trying to create an irregular grid layout using CSS. Here's my Jfiddle so far:

http://jsfiddle.net/F94gu/1/

Code:

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;}

What I'm trying to do is move the blue block up (directly underneath the red block), which would allow the brown block to move to the left and up. Below is an image of how it currently looks vs what I'm trying to do.

Hope this is enough information, I'd be happy to clarify if you need more information. I'm aware that the pixels are slightly off, it's about a quarter of the size of what I'm looking for so I divided all of my pixel definitions by 4, which lead to some decimals which I just ignored (and causes the lines to not match up perfectly).

解决方案

http://jsfiddle.net/F94gu/2/

''Dirty'' solution, with negative margins, but...

  .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;}

这篇关于CSS:不规则网格布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！