0

我有一些想要展示的元素。但遗憾的是，它并没有按照我想要的方式工作。

这是它的工作原理：http: //jsfiddle.net/lukasoppermann/H3Nmg/7/

我想要它，以便红色框填充绿色框和左侧之间的空间。它需要是动态的。容器的宽度可能会改变，元素的顺序可能会不同。

我当然更喜欢纯 CSS 的方式，但 js 也很好。有没有人有任何提示？

// 编辑澄清一下，元素不能硬编码或向右浮动，因为元素的数量、包装器的宽度以及绿色元素的数量可能会有所不同。元素的顺序也可以变化。我基本上需要元素在没有任何整体的情况下自动排列。

这就是我想要的。

http://img526.imageshack.us/img526/613/boxsorting.jpg

4

4 回答 4

0

float:right用row-twodiv怎么样？如果需要，您可能必须修复填充以使绿色更接近红色。在这里演示http://jsfiddle.net/H3Nmg/9/

于 2012-04-04T02:04:21.933 回答
0

它应该看起来像这样http://jsfiddle.net/H3Nmg/14/

减去硬编码的宽度。

于 2012-04-04T02:12:12.863 回答
0

查看代码和演示的小提琴

小提琴：http: //jsfiddle.net/H3Nmg/20/

演示：http: //jsfiddle.net/H3Nmg/20/embedded/result/

注意：尝试减小容器 div 的窗口大小或宽度，您将看到 case 和 case 输出。

于 2012-04-04T03:44:58.303 回答
0

嗨，您可以像这样定义三个 div

css

.container{
    float:left;
    margin-left:10px;
}
.top{
    width:100px;
    height:100px;
    background:red;
}


.middle{
    width:100px;
    height:100px;
    background:darkred;
    margin-top:5px;
}
.right{
    width:100px;
    height:200px;
    background:lightgreen;
    float:left;
    margin-left:10px;
}

.bottom{
    float:left;
    width:100px;
    height:100px;
    background:green;
    margin-left:10px;
}

HTML

<div class="container">
    <div class="top"></div>
    <div class="middle"></div>
</div>

<div class="right"></div>

<div class="bottom"></div>
​

现场演示http://jsfiddle.net/rohitazad/wyvrt/1/ ​</p>

于 2012-04-04T04:30:29.667 回答