Css 响应4柱网轴线在调整大小时变为3柱网轴线

好的，所以网格很好。在过去的两天里，我一直在关注Twitter，但我仍然无法解决一个简单的问题：

I have 4 horizontal sections with an image header and text. 
I want each to take up 25%.

调整屏幕大小时：

I need the rightmost section to disappear
Each remaining section should therefore take up 33%

如果我将

.span3

类放在12列网格中，那么我必须使用javascript将它们更改为

.span4

，这不是我想要的

我已经研究了symentic标记（没有在代码中加入魔法类），但是除了语义之外，大多数框架都不完全支持它

---

这看起来很简单，但我有点被卡住了。

没有任何花哨的框架，下面是一个非常简单的纯CSS示例，它包含4列，并在调整大小时将其设置为3列

HTML

<div class="container">
    <div class="box">First</div>
    <div class="box">Second</div>
    <div class="box">Third</div>
    <div class="box">Fourth</div>
</div>

一个重要的方面是，我没有使这些严格的25%的宽度，因为我想在每一个之间的差距。在不同的场景和标记中，可以将宽度设置为25%，只需在其中添加另一个元素，并添加填充，以在每列之间留出空间

我个人发现使用框架进行响应性设计更加困难（除非整个页面已经大量使用了上述框架），而且我工作过的大多数网站都不会花太多时间来制定一些自定义规则和声明

---

不过我会注意到，媒体查询在大多数现代浏览器上都可用，但是我还没有看到在没有JavaScript帮助的情况下，它在少于IE8的情况下工作。针对不兼容浏览器的一个库是。

对于这一点，我认为您可以创建自己的

code

，并在

媒体查询中按照您想要的方式进行排列。我还说过这是+1，因为没有任何花哨的框架，这里有一个非常直接的示例。：-）我清楚地记得过去两天我为什么不喜欢框架。但我需要看看外面有什么。我对旧的IE JS没意见fixes@Simon_Weaver在需要的时候使用框架，但要知道为什么要使用它们。框架肯定有它的用途，否则就不会流行。取决于你试图构建的网站的规模、兼容性和你必须做的时间，这些都会影响到你的网站是更好还是更容易做。我还了解到，响应框架通常不会真正为你做任何事情
.box
{
    width:22%;
    margin:0px 1.5%;
    background-color:#000;
    color:#fff;
    float:left;
}

@media screen and (max-width:500px)
{
    .box
    {
        width:30%;
    }
    .box:last-child
    {
        display:none;
    }
}