html - 在彼此下方 float div 元素

Question

我想让 div 元素彼此重叠。所以 1、2 和 3 都可以，4 在 3 以下。

图片:http://img42.com/DZIeu+

HTML 必须相同，因为用户可以添加新的 div。 (最多 8 个 div，所以最旧的 div 消失了)。由于浏览器对 nth 的支持，我不想使用绝对定位或固定宽度。

HTML:

<div id="wrapper">
<div id="nwsgal">
    <div class="nwsitem">1</div>
    <div class="nwsitem">2</div>
    <div class="nwsitem">3</div>
    <div class="nwsitem">4</div>    
    <div class="nwsitem">5</div>
    <div class="nwsitem">6</div>
    <div class="nwsitem">7</div>
    <div class="nwsitem">8</div>
</div>

CSS:

#nwsgal{
background:#FAFAFA;
width:100%;
height:40%;
min-height:250px;
display:block;
position:relative;  
overflow:hidden;
vertical-align:top;
}

.nwsitem{
    background:#999;
    width:25%;
    height:100%;
    display:block;
    position:relative;
    float:left;
}

.nwsitem:nth-child(3), .nwsitem:nth-child(4){width:25%; height:50%;}
.nwsitem:nth-child(5), .nwsitem:nth-child(6), .nwsitem:nth-child(7), .nwsitem:nth-child(8){width:12.5%; height:50%;}
.nwsitem:nth-child(odd){background:#FDFDFD;}

http://jsfiddle.net/ntxhbj43/

任何想法，js/css 解决方案？

Answer 1

将它们包裹在容器中。

<div id="wrapper">
    <div id="nwsgal">
        <div class="nwsitem">1</div>
        <div class="nwsitem">2</div>
        <div class="nwsitemwrap">
            <div class="nwsitem">3</div>
            <div class="nwsitem">4</div>    
        </div>
        <div class="nwsitemwrap">
            <div class="nwsitem">5</div>
            <div class="nwsitem">6</div>
        </div>
        <div class="nwsitemwrap">
            <div class="nwsitem">7</div>
            <div class="nwsitem">8</div>
        </div>
    </div>
</div>

包装器和包装器的子项需要一些额外的样式:

.nwsitemwrap { float: left; width: 25%; }
.nwsitemwrap > .nwsitem { width: 100%; float: none; }

编辑 这是一个functional fiddle .为了使其“动态”，我们需要知道您希望如何在某些情况下布置元素。