响应三列div布局-Java 学习之路

-2

我正在开发一个三列布局的页脚 . 我需要这个页脚响应每个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/

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

3 回答

0

使用@media查询 . 访问这个网站

Media Query Tutorial

回复于 2024-04-29T09:27:01+08:00

在css末尾添加：

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

JSFiddle

About Media queries

回复于 2024-04-29T09:27:01+08:00

0
您可以使用 min-width 或 @media queries ，因为其他答案正在解释 .
```
#one, #two, #three{
    ...
    min-width:100px; 
}
```
更新 JSFiddle .
回复于 2024-04-29T09:27:01+08:00

响应三列div布局

3 回答

相关问题