CSS - 網格/砌體佈局

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個彩色塊切換大塊藍色塊的位置。我已經放置'>'和'<'箭頭來說明我的意思。

另外我不能編輯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%; 
}