3

トリックは、1と3の間のマージンが2と4のように15ピクセルになるように、div番号3を少し高くしたいということです.

http://www.tiikoni.com/tis/view/?id=528cedf

問題は、div のサイズが SQL クエリからのデータのサイズと異なるため、div のサイズがわからないことです。そして、divは1,2,3,4,5..... 2 x 2の順序で取得され、それぞれがクエリの要素を表します。leftobject、rightobject で既に div を分割しています。

.leftobject
{
float:left;
position: relative;
width: 300px;
border-style: outset;
border-width: 3px;
border-color: #EdEDED;
background-color: #FFFFFF;
border-radius: 15px;
margin-bottom: 15px;
}   

.rightobject
{
margin-left: 315px;
position: relative;
width: 300px;
border-style: outset;
border-width: 3px;
border-color: #EdEDED;
background-color: #FFFFFF;
border-radius: 15px;
margin-bottom: 15px;
}

要素 % 2 = 0 の場合は左側にあり、それ以外の場合は右側にある場合、json を使用して div を出力するための for ループを実行しています。

ありがとうございました。

4

3 に答える 3

2

float:right;に加えていつでもご利用いただけますfloat:left;。

#wrap div:nth-of-type(odd) {
    float:left;
}
#wrap div:nth-of-type(even) {
    float:right;
}

フィドル

于 2013-10-17T00:14:08.050 に答える
0

次のようなことができます。

ここで動作しています：http://jsfiddle.net/X9f7a/

もちろん、ボックスのサイズ（および色）を好みに合わせて調整してください。

編集: ボックスの高さを固定したくない場合は、最小高さを何かに設定できます。このように、書き込みが多い場合はボックスが拡張されます。

ダブル編集！ あなたは私たちのコメントを読みたいかもしれません! :)

HTML:

<div class="wrap">
    <div class="left-side">
        <div class="box-1">
        </div>
        <div class="box-2">
        </div>
    </div>
    <div class="right-side">
        <div class="box-3">
        </div>
        <div class="box-4">
        </div>
    </div>
</div>

CSS:

.left-side, .right-side {
    width:80px;
    height:auto;
    background-color:black;
    display:inline-block;
    vertical-align:top;
}

.box-1, .box-2, .box-3, .box-4 {
    width:50px;
    height:50px;
    background-color:red;
    margin-left:auto;
    margin-right:auto;
    margin-top:5px;
    margin-bottom:5px;
}

.box-2 {
    height:80px;
}

.box-3 {
    height:90px;
}
于 2013-10-16T23:32:25.753 に答える
0

このような構造の div 配置は CSS だけでは扱えません。

そのためには JS が必要です。そのような構造を作成するための多くのプラグインを見つけることができます。

ここにそれらの1つがあります

于 2013-10-17T05:57:21.170 に答える