CSS -网格/砌体布局

Question

我创建了一个类似于so (JSFIDDLE)的网格布局：

HTML：

<div class="grid-box">
    <div class="item-9">
        <div class="box-1"></div>
        <div class="box-2"></div>
        <div class="box-3"></div>
        <div class="box-4"></div>
        <div class="box-5"></div>
        <div class="box-6"></div>
        <div class="box-7"></div>
        <div class="box-8"></div>
        <div class="box-9"></div>
    </div>
</div>

CSS：

.grid-box > .item-9 > .box-1 {
    background: none repeat scroll 0 0 #990066;
    display: inline-block;
    float: left;
    height: 200px;
    width: 49%;
}
.grid-box > .item-9 > .box-2 {
    background: none repeat scroll 0 0 #3333FF;
    display: inline-block;
    float: right;
    height: 400px;
    width: 26%;
}
.grid-box > .item-9 > .box-3 {
    background: none repeat scroll 0 0 #993366;
    display: inline-block;
    float: right;
    height: 100px;
    width: 25%;
}
.grid-box > .item-9 > .box-4 {
    background: none repeat scroll 0 0 #FF66FF;
    display: inline-block;
    float: right;
    height: 100px;
    width: 25%;
}
.grid-box > .item-9 > .box-5 {
    background: none repeat scroll 0 0 #CC66CC;
    display: inline-block;
    float: left;
    height: 140px;
    width: 24.5%;
}
.grid-box > .item-9 > .box-6 {
    background: none repeat scroll 0 0 #9966CC;
    display: inline-block;
    float: left;
    height: 140px;
    width: 24.5%;
}
.grid-box > .item-9 > .box-7 {
    background: none repeat scroll 0 0 #CC6699;
    display: inline-block;
    float: right;
    height: 100px;
    width: 25%;
}
.grid-box > .item-9 > .box-8 {
    background: none repeat scroll 0 0 #9966CC;
    display: inline-block;
    float: right;
    height: 100px;
    width: 25%;
}
.grid-box > .item-9 > .box-9 {
    background: none repeat scroll 0 0 #990066;
    display: inline-block;
    float: left;
    height: 60px;
    width: 49%;
}

然后我遇到了一个小问题，我需要框-2左对齐为块-1，所以基本上我需要切换的位置，大的蓝色块与4多色块。我放置了placed >和<>箭头来说明我的意思.

我也不能编辑HTML，因为它是由PHP生成的。我只能编辑CSS。我也不能编辑尺寸，例如宽度和高度。

任何帮助都非常感谢。

Answer 1

您可以向左和向右推元素。

position: relative
left/right: XX%

http://jsfiddle.net/HerrSerker/ukEfY/6/

/* ... */
.grid-box > .item-9 > .box-2 {
    /* ... */
    position: relative;
    left: -25%;
}
.grid-box > .item-9 > .box-3 {
    /* ... */
    position: relative;
    left: 26%;
}
.grid-box > .item-9 > .box-4 {
    /* ... */
    position: relative;
    left: 26%;
}

/* ... */

.grid-box > .item-9 > .box-7 {
    /* ... */    position: relative;
    left: 26%;
}
.grid-box > .item-9 > .box-8 {
    /* ... */
    position: relative;
    left: 26%;
}
/* ... */

Answer 2

使用绝对定位，它可以像Working Fiddle那样完成

注意:这是一个非常严格的布局。(每个职位都是固定的)

正如您所要求的，更改仅在CSS中进行。

HTML:

<div class="grid-box">
    <div class="item-9">
        <div class="box-1">1</div>
        <div class="box-2">2</div>
        <div class="box-3">3</div>
        <div class="box-4">4</div>
        <div class="box-5">5</div>
        <div class="box-6">6</div>
        <div class="box-7">7</div>
        <div class="box-8">8</div>
        <div class="box-9">9</div>
    </div>
</div>

CSS:

.grid-box > .item-9
{
    position: relative;
}
.grid-box > .item-9 > [class *= 'box-']
{
    position: absolute;
}
.grid-box > .item-9 > .box-1 {
    background: none repeat scroll 0 0 #990066;
    height: 200px;
    width: 50%;
}
.grid-box > .item-9 > .box-2 {
    background: none repeat scroll 0 0 #3333FF;
    height: 400px;
    width: 25%;
    left: 50%;
}
.grid-box > .item-9 > .box-3 {
    background: none repeat scroll 0 0 #993366;
    height: 100px;
    width: 25%;
    right: 0;
}
.grid-box > .item-9 > .box-4 {
    background: none repeat scroll 0 0 #FF66FF;
    height: 100px;
    width: 25%;
    right: 0;
    top: 100px;
}
.grid-box > .item-9 > .box-5 {
    background: none repeat scroll 0 0 #CC66CC;
    display: inline-block;
    height: 140px;
    width: 25%;
    top: 200px;
}
.grid-box > .item-9 > .box-6 {
    background: none repeat scroll 0 0 #9966CC;
    height: 140px;
    width: 25%;
    top: 200px;
    left: 25%;
}
.grid-box > .item-9 > .box-7 {
    background: none repeat scroll 0 0 #CC6699;
    height: 100px;
    width: 25%;
    top: 200px;
    right: 0;
}
.grid-box > .item-9 > .box-8 {
    background: none repeat scroll 0 0 #9966CC;
    height: 100px;
    width: 25%;
    top: 300px;
    right: 0;
}
.grid-box > .item-9 > .box-9 {
    background: none repeat scroll 0 0 #990066;
    top: 340px;
    height: 60px;
    width: 50%;
}