3

诀窍是我希望 div 编号 3 稍微高一点，使 1 和 3 之间的边距像 2 和 4 一样为 15 px。

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;
}

我正在运行一个 for 循环以使用 json 输出 div，如果 element % 2 = 0 那么它在左侧，否则它在右侧。

谢谢你。

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

您不能仅通过 CSS 处理此类结构的 div 排列。

你需要 JS，你可以找到很多插件来创建这样的结构。

这是其中之一

于 2013-10-17T05:57:21.170 回答