jquery - フローティング div 上部の間隔

Question

HTML を変更せずに、赤い列を黒い列の下に配置したいと思います。

これに対するjqueryまたはcssソリューションはありますか?

CSS:

.col{
    width: 25%;
    border: 1px solid black;
    margin: 10px;
    padding:2px;
    float:left;
}

.clear{clear:both;}

.col1{height: 200px;}
.col2{height: 300px;}
.col3{height: 200px;}
.col4{height: 200px; border: 1px solid red;}
.col5{height: 220px; border: 1px solid red;}
.col6{height: 120px; border: 1px solid red;}

HTML:

<div class="col col1">1</div>
<div class="col col2">2</div>
<div class="col col3">3</div>
<div class="clear"></div>
<div class="col col4">4</div>
<div class="col col5">5</div>
<div class="col col6">6</div>

score 1 · Accepted Answer

floatプロパティを使用する

.col2 {
float: right;
height: 200px;
}

とセット

.col3{border: 1px solid red;
float: left;
}

デモ：フィドル

score 0 · Accepted Answer

最初のdivの高さが固定されているので、position：absoluteを使用して、赤いdivを最初のdivの下に簡単に配置できます。

.col3{border: 1px solid red; position:absolute; top:100px}

デモhttp://jsfiddle.net/3HUNz/18/

score 0 · Accepted Answer

それらを一列に並べるには、フロートの概念を使用する必要があります。

http://jsfiddle.net/3HUNz/16/

score 0 · Accepted Answer

ボックスが同じままである場合は、次のことができます。

.col3 { margin-top: -90px; }

http://jsfiddle.net/X37eZ/

jquery - フローティング div 上部の間隔

4 に答える 4

Related

Reference