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从水平视图变为垂直的方法是什么？当浏览器最小化并且没有足够的宽度可以水平地看到它时，我需要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

Answer 2

你可以用它来更新给定的CSS

.footer_mainDIV {
    position: absolute;
    width: 100%;
    border-top: 1px solid #eeeeee;
    margin: auto;
    bottom: 0px;
    left:20px;

}

.footer_leftDIV {
    text-align: left; 
    height: 50px;
    width: 33%;
    float:left;
}

.footer_middleDIV {
    height: 50px;
    width: 33%;
    float:left;

}

.footer_rightDIV {
    float:left;
    height: 50px;
    width: 33%;
}

但是将它添加到相对属性div中我希望它能为你工作。

如何使用css更改从水平到垂直的div？

2 个答案: