以金字塔形状堆叠的响应式 css 瓷砖答案

【问题标题】：Responsive css tiles stack in pyramid shape以金字塔形状堆叠的响应式 css 瓷砖
【发布时间】：2013-12-13 15:14:30
【问题描述】：

我有一排 3 个内联块，横向跨度页面的宽度：

当页面达到 1000 像素宽时，我希望图块自己堆叠成金字塔：

然后他们需要在 460px 垂直堆叠：

我目前的html/css结构是：

<div class='tile-row'>
    <div class='tile'></div>
    <div class='tile'></div>
    <div class='tile'></div>
</div>

.tile-row{
    margin: 0 auto;
    max-width:1485px;
}

.tile{
    width:32%;
    display: inline-block;
    height: 200px;
}

如何设置媒体查询来完成上述场景？有没有更简单的方法可以在不使用媒体查询的情况下做到这一点？

【问题讨论】：

多少块？尝试一些事情并展示你的进步。您可能必须使用 nth-child() 定位特定索引并添加边距或宽度。

标签： html css responsive-design tile

【解决方案1】：

Fiddle: http://jsfiddle.net/C2pjx/


 .tile-row{
      margin: 0 auto;
 }

.tile{
    width:32%;
    float: left;
    height: 100px;
    background: red;
    margin-left:10px;
    margin-bottom: 10px;
 }

 @media only screen and (max-width: 1000px) {
   .tile-row > div:nth-of-type(1)
    {
        float: none;
        margin: 10px 100px;

    }
 }
 @media only screen and (max-width: 460px) {
    .tile-row > div:nth-of-type(1){
        margin: 10px 0;
    }
    .tile{
        float:none;
        background: blue;
        margin: 10px 0;
    }

 }

【讨论】：