CSS：如何將div 2 2放置

Question

訣竅在於我希望div 3略高一些，1到3之間的邊距是15 px，比如2和4。

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

問題是div的大小與我的SQL查詢中的數據大小不同，所以我不知道div的大小是多少。 並且div以1,2,3,4,5 ..... 2乘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，我正在運行for循環以使用json輸出div，然后它在左側，否則它在右側。

謝謝。

Answer 1

你總是可以使用float:right; 除了float:left; 。

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

小提琴

Answer 2

你可以這樣做：

它在行動： 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;
}

Answer 3

你不能只通過CSS處理這種結構的div排列。

你需要JS，你可以找到許多用於創建這種結構的插件。

這是其中之一