1

私は CSS で div を作成しようとしていますが、その目的は、他のオブジェクトがこの場所にあるのをブロックすることです。CSSだけでどうやってそんなことできるんだろうと思って。

私は最初のdivを持っています:

#Content
{
width:1000px;
height:773px;

margin-left:auto;
margin-right:auto;

position:relative;
}

最初のものに2番目のものがある場合：

#blocker
{
width:800px;
height:573px;

display:block;
position:absolute;

top:101px;
left:101px;
}

最初の div は、次のような複数の div によって自動的に埋められます。

.element
{
width:100px;
height:100px;

display:inline-block;

margin:0;

border-style:solid;
border-width:1px;
border-color:grey;
}

問題は、「要素」が「ブロッカー」の下にあるのに、次の利用可能な場所にスキップしたいということです。

真ん中に何かが欲しいし、ブロッカーの周りに要素を表示したい。

それが明らかであることを願っています。私は何時間もそれをやろうとしてきましたが、ウェブ上で何も見つかりませんでした

よろしく、

4

1 に答える 1

2

例 1: 領域の上、左、右、および下の浮動要素

この例では、一連の div (正方形のブロック) を浮動させて、ブロック要素 ( ) を絶対配置できる.element長方形の空きスペースを残す方法を示します。#blocker

次のHTMLを検討してください。2 つのクラスを使用して、一番上の行の最後の要素 ( .start-skip) と、開いた長方形のスペースの右下の最後の要素( ) を識別し.end-skipます。

<div id="Content">
    <div id="blocker"></div>
    <div class="element">1</div>
    <div class="element">2</div>
    <div class="element">3</div>
    <div class="element">4</div>
    <div class="element">5</div>
    <div class="element start-skip">6</div>
    <div class="element">7</div>
    <div class="element">8</div>
    <div class="element">9</div>
    <div class="element">10</div>
    <div class="element">11</div>
    <div class="element">12</div>
    <div class="element">13</div>
    <div class="element end-skip">14</div>
    <div class="element">15</div>
    <div class="element">16</div>
    <div class="element">17</div>
    <div class="element">18</div>
    <div class="element">19</div>
    <div class="element">20</div>
    <div class="element">21</div>
    <div class="element">22</div>
    <div class="element">23</div>
</div>

次に、次のCSSを適用します。

#Content {
    width:600px;
    height:900px;
    margin-left:auto;
    margin-right:auto;
    border: 1px dotted gray;
    overflow: auto;
    position: relative;
}
#blocker {
    background-color: yellow;
    position: absolute;
    top: 100px;
    left: 100px;
    width: 400px;
    height: 400px;
}
.element {
    width: 98px;
    height: 98px;
    float: left;
    margin:0;
    border-style:solid;
    border-width:1px;
    border-color:grey;
}
.start-skip ~ .element:nth-child(2n) {
    background-color: beige;
    margin-right: 400px;
}
.end-skip ~ .element:nth-child(2n) {
    background-color: transparent;
    margin-right: 0;
}

秘訣は、~(隣接する兄弟) と nth-child()セレクター (CSS3 の一部) を使用して、長方形のスペースを囲む行の右マージンを設定することです。

を含むルール.start-skipは広い右マージンをオンにし、 を含むルール.end-skipは右マージンをゼロにリセットします。

最後に、絶対位置を使用して、要素と要素#blockerの間のスペースに要素を配置します。.start-skip.end-skip

このアプローチを拡張して、長方形のスペースの左右に 2 つ以上の要素を配置できるようにすることができます。

デモを参照してください: http://jsfiddle.net/audetwebdesign/QCYya/

例 2: 事前定義された領域の右と下のフローティング要素

この場合、ブロック要素は通常のコンテンツ フローにあり、.elementは右と下にフロートします#blocker。

HTML が次のようになっているとします。

<div id="Content">
    <div id="blocker"></div>
    <div class="element">1</div>
    <div class="element">2</div>
    <div class="element">3</div>
    ...
</div>

次の CSS を適用します。

#Content {
    width:1004px;
    height:773px;
    margin-left:auto;
    margin-right:auto;
    border: 1px dotted gray;
    overflow: auto;
}
#blocker {
    width:800px;
    height:573px;
    background-color: yellow;
    float: left;
}
.element {
    width:100px;
    height:100px;
    float: left;
    margin:0;
    border-style:solid;
    border-width:1px;
    border-color:grey;
}

すべての要素をフロートさせると、探しているレイアウトにスタックされます。

境界線があるため、.elementブロックの幅と高さが 102px であることに注意し、#Contentそれに応じて幅を調整してください。

または、幅/高さ.elementを 98px に設定することもできます。

and に設定overflow: autoする#Contentと、 float が の前後の兄弟要素をラップしないようになり#Contentます。

デモを参照してください: http://jsfiddle.net/audetwebdesign/AXfA8/

于 2013-09-25T00:50:52.277 に答える