响应式设计。浮动 div 的网格布局，但有一个例外

Question

也许这是一个棘手的问题，也许不是。我有一个带有浮动 div 的网格布局。我想建立一个响应式设计。当您调整浏览器窗口的大小时，div 将浮动在隐藏区域中。这很容易。

但我尝试的是最后一个“更多”div 将始终是网格中的最后一个 div。

示例代码如下

HTML

<div class="bar">
    <div id="1" class="square">1</div>
        <div id="2" class="square">2</div>
        <div id="3" class="square">3</div>
        <div id="4" class="square">4</div>
        <div class="more">more</div>
    </div>
</div>

CSS

div.more {
width: 60px;
height: 60px;
background: red;
color: #000;
text-align: center; 
float: left;
}

div.container {
position: relative;
width: 100%;
height: 60px;
}

div.square {
position: relative;
background: green;
width: 60px;
height: 60px;
float: left;
margin-right: 5px;
}

div.bar {
width: 100%;
height: 60px;
background: #000;
overflow: hidden;
}

这里我有一个简单的小提琴演示。当您调整网格时，div 是浮动的。但是最后一个 div 也是浮动的，这不是我这里需要的。

fiddle demo

这可以通过纯css完成还是需要js？感谢您的帮助。

鲁文

Answer 1

我会使用这样的媒体查询http://jsfiddle.net/DIRTY_SMITH/2s4zr470/4/

HTML

<div class="bar">
    <div id="one" class="square">1</div>
        <div id="two" class="square">2</div>
        <div id="three" class="square">3</div>
        <div id="four" class="square">4</div>
        <div class="more">more</div>
    </div>
</div>

CSS

div.more {
        width: 60px;
        height: 60px;
        background: red;
        color: #000;
        float: right;
        text-align: center; 
        float: left;

    }

div.container {
        position: relative;
        width: 100%;
        height: 60px;
    }

div.square {
        position: relative;
        background: green;
        width: 60px;
        height: 60px;
        float: left;
        margin-right: 5px;
    }

 div.bar {
        width: 100%;
        height: 60px;
        background: #000;
    }
@media (max-width: 340px){
    #four{display: none;}

}
@media (max-width: 280px){
    #three{display: none;}

}
@media (max-width: 220px){
    #two{display: none;}

}
@media (max-width: 160px){
    #one{display: none;}

}