Question

我想要显示一些元素。但遗憾的是，它并不像我想要的那样有效。

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

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

我当然更喜欢仅限css的方式，但js也很好。有人有任何提示吗？

//编辑为了澄清，元素不能被硬编码或浮动到右边，因为元素的数量，包装的宽度以及绿色元素的数量可以变化。元素的顺序也可以变化。我基本上需要这些元素来自行安排自己。

这就是我想要的。

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

Answer 1

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

Answer 2

看起来应该是http://jsfiddle.net/H3Nmg/14/

减去硬编码宽度。

Answer 3

查看代码和演示的小提琴

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

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

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

Answer 4

您好，您可以像这样定义三个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/

CSS Float填补了div之间的空白

4 个答案: