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

そして、ちょっとした問題が発生しました。ボックス 2 をブロック 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 に答える