Question

好的，所以网格显然很棒。过去两天我一直在关注Foundation，Twitter的Bootstrap，Semantic和Responsive.gs，我仍然无法找出一个简单的问题：

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标记（不在代码中放入魔术类），但只获得very complicated并且除了语义之外的大多数框架都不完全支持。

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

Answer 1

没有任何花哨的框架，这里是一个非常直接的例子，在纯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>

<强> CSS

.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;
    }
}

JSFiddle

一个重要的方面是我没有严格限制25％的宽度，因为我希望每个都有一个余量。在不同的场景和标记中，你可以使宽度为25％，并在其中放置另一个元素，并在每列之间留出空格。

我个人发现使用框架进行响应式设计比较困难（除非整个页面已经大量使用了所述框架），而且我工作的大多数网站都没有花太多时间来制作一些自定义规则和声明。 / p>

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

响应4列网格在调整大小时变为3列网格

1 个答案: