CSS div浮动。推送最后一个div

Question

我有5个<div>元素，它们都向左浮动。

我怎样才能推动我的最后一个div？ （我不能再使用2个包装器，因为它们将使用jQuery重新调整大小，其中所有5个必须使用相同的包装器）

我不知道我是否以正确的方式解释我的问题，所以如果您有疑问，请询问。

HTML ：

<div id="ModeliSadrzajAir">
    <div class="kocka220x140">1</div>
    <div class="kocka220x140">2</div>
    <div class="kocka220x300">3</div>
    <div class="kocka220x300">4</div>
    <div class="kocka460x140">5</div>
</div>

CSS ：

#ModeliSadrzajAir {
    width: 960px;
    margin: -60px 0px 0px -10px;
    min-height: 500px;
    background-color: #00FFFF;
    position: absolute;
    z-index: 1000;
}

.kocka220x140 {
    border-radius:5px;
    width: 220px;
    margin: 10px;
    height: 140px;
    float: left;
    background-color: #FFFF00;
}
.kocka220x300 {
    border-radius: 5px;
    width: 220px;
    margin: 10px;
    height: 300px;
    float: left;
    background-color: #FF0000;
}
.kocka460x140 {
    border-radius: 5px;
    width: 460px;
    margin: 10px;
    height: 140px;
    float: left;
    background-color: #FF0000;
}

Answer 1

<强> Fiddle

您必须将.kocka220x300的{​​{1}}属性设置为float至left

我还建议你将你的HTML更改为

right

这样，您的 3 位于 4 的左侧，请检查更新的小提琴链接

Answer 2

您可以尝试此http://jsfiddle.net/modaloda/czz2Z/9/

    .kocka460x140
{
    border-radius: 5px;
    width: 460px;
    margin: 10px;
    height: 140px;
    float: left;
    background-color: #FF0000;
    position: absolute;
    top: 160px;
}

Answer 3

我试图重现你的例子。

基本上我认为你需要一个包含position:relative;的包装器，它包含所有div并制作第5个div position:absolute;和bottom:0px;。同时添加overflow:auto;，以便你父div中包含的最大高度将推动父div的高度（再读一遍，你会明白：P）。

检查这个小提琴：

http://jsfiddle.net/R8hJ3/1/

Answer 4

你有没有试过像Grid-a-licious这样的插件 如果没有试试..如果你需要一个纯粹的Css，你可以看看下面的链接..

  

jsfiddle.net/chermanarun/HaV29 /