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

About Media queries

Answer 2

使用@media查询。访问该网站

Media Query Tutorial

Answer 3

您可以使用min-width或@media queries，其他答案正在解释。

#one, #two, #three{
    ...
    min-width:100px; 
}

更新了 JSFiddle 。

响应三列div布局

3 个答案: