1

http://klarbild.probiermau.ch/static/index.html

青いボックスが左に浮かんでいます。オレンジ色のボックスが 1 つあります - 位置: 相対。

オレンジ ボックスは、フローティング ブルー ボックスの内側に配置し、重ならないようにする必要があります。オレンジ色のボックスの周りに青いボックスが浮いているはずです。

これは可能ですか？ヒント？

編集：cssを使用してのみオレンジ色のボックスの位置を変更できるようにしたい. 青いボックスは、常にオレンジ色のボックスの周りに浮かんでいる必要があります。オレンジ色のボックスの後ろに「隠れる」ことなく。

どうもありがとう

4

1 に答える 1

1

ヒント: オレンジ色のボックスの位置を変更し、右にフロートさせます ( なしposition : relative) 。

このフィドルの例を参照してください: http://jsfiddle.net/4Bber/1/

コード：

<div class="wrapper">
    <div>blue 1</div>
    <div>blue 2</div>
    <div>blue 3</div>
    <div>blue 4</div>
    <div>blue 5</div>
    <div>blue 6</div>
    <div id="orange"></div>
    <div>blue 7</div>
    <div>blue 8</div>
    <div>blue 9</div>
    <div>blue 10</div>
    <div>blue 11</div>
    <div>blue 12</div>
    <div>blue 13</div>
    <div>blue 14</div>
</div>

CSS

.wrapper { width: 440px; }
.wrapper div { 
    width      : 100px; 
    height     : 100px;
    background : blue;
    float      : left; 
    margin     : 0 0 10px 10px; 
    color      : #fff;
 }

 #orange { 
    background : orange; 
    width      : 210px; 
    height     : 210px; 
    float      : right;
 }
于 2012-05-11T14:45:18.753 に答える