html - 如何使用 css 将 div 从水平放置更改为垂直放置？

Question

我的页脚中有 3 个 div，这些 div 用于页脚，您可以在页面底部水平看到它们。

<div class="footer-text footer_mainDIV">
    <div class="footer_leftDIV">
        All rights reserved
    </div>
    <div class="footer_middleDIV">
        <a href="url">Help</a>

    </div>
    <div class="footer_rightDIV">
        Version 6.0
    </div>
</div>

使用 CSS:

.footer_mainDIV {
    position: relative;
    width: 100%;
    border-top: 1px solid #eeeeee;
    margin: auto;
}

.footer_leftDIV {
    text-align: left; 
    position : absolute;
    top: 0px;
    left: 20px;
    height: 50px;
    width: 33%;
    margin: auto;
}

.footer_middleDIV {
    height: 50px;
    width: 33%;
    margin: auto;

}

.footer_rightDIV {
    text-align: right;
    position: absolute;
    top: 0px;
    right: 20px;
    height: 50px;
    width: 33%;
    margin: auto;
}

在使用 css 最小化浏览器时，如何使我的 div 从水平 View 变为垂直 View ？ 当浏览器最小化并且没有足够的宽度来水平查看它们时，我需要将 div 变为垂直。

谢谢，

Answer 1

您可以使用媒体查询来实现这一点。例如，我的目标是 480 像素。

 @media all and (max-width: 480px)
{
 .footer_leftDIV, .footer_middleDIV, .footer_rightDIV
 {
    width:100%;
    position:relative;
    text-align:left;
    left:0;
  }
}

SAMPLE DEMO