Question

我希望将div元素放在彼此之下。所以1,2和3都可以，4下面是3。

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

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。使其成为动态的＃34;我们需要知道您希望如何在某些情况下布置项目。

将div元素浮动在彼此之下

1 个答案: