响应三列div布局

Question

我正在开发一个三列布局的页脚.我需要这个页脚响应每个div在移动设备上彼此堆叠,不包括平板电脑.

这是HTML:

<div id="footer-pages">

<div class="footer-container">  
    <div id="one">
        container1
    </div>

    <div id="two">
        container2
    </div>

    <div id="three">
        container3
    </div>
</div>
</div>

这是CSS:

#footer-pages{
    width:100%;
    height:100px;
background-color:red;    
}

.footer-container{
   width:70%;
    margin-left:auto;
    margin-right:auto;
   }

#one, #two, #three{
    width:30%;
    float:left;
    }

这里也是我设法实现的一个小提琴:http://jsfiddle.net/5L2RY/

有人可以指导我如何实现这一目标吗？

Answer 1

在css末尾添加:

@media screen and (max-width: 768px) {
    #one, #two, #three{
        width:auto;
        float:none;
        display:block;
    }
}

的jsfiddle

关于媒体查询