Question

我创建了一个像这样的网格布局（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%;
}

然后我遇到了一个小问题，我需要将box-2左对齐到block-1所以基本上我需要用4个多色块来切换大蓝色块的位置。我放了'＆gt;'和'＆lt;'箭头来说明我的意思。

此外，我无法编辑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%;
}

CSS - 网格/砌体布局

2 个答案: