0

我创建了一个像这样的网格布局（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 个彩色块切换蓝色大块的位置。我放置了“>”和“<”箭头来说明我的意思。

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

非常感谢任何帮助。

4

2 回答 2

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%;
}
/* ... */
于 2013-10-15T12:53:32.187 回答
0

使用绝对定位，可以像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%;
}
于 2013-10-14T07:32:54.370 回答