Question

我有一个5个盒子的页脚：一个用于徽标，关于，服务，公司和联系人。下面是html代码。

<footer class="mainfooter">
    <div class="footerlogo">
        <i class="fa fa-fax fa-5x" aria-hidden="true"></i>
    </div>
    <div class="aboutbox">    
        <strong><p>ABOUT</p></strong>
        <p style="color:#ffffe6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero, dicta, nisi id ullam debitis, obcaecati modi magni culpa quasi blanditiis similique !</p>
    </div>
    <div class="services"> 
        <ul>
            <li><strong><p>SERVICES</p></strong></li>
            <li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Financial</a></li>
            <li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Medical</a></li>
            <li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Insurance</a></li>
        </ul>
    </div> 
    <div class="company">
        <ul> 
            <li><strong><p>COMPANY</p></strong></li>     
            <li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Home</a></li>
            <li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> About</a></li>
            <li><a href="#"><i class="fa fa-caret-right" aria-hidden="true"></i> Contact</a></li>
        </ul>
    </div>
    <div class="contact">          
        <ul>
            <li><strong><p>CONTACT</p></strong></li>                   
            <li style="color:#ffffe6"><i class="fa fa-phone" aria-hidden="true"></i> +27 000 0004l</li>
            <li style="color:#ffffe6"><i class="fa fa-envelope-o" aria-hidden="true"></i> info@nevex.co.za</li>
            <li style="color:#ffffe6"><i class="fa fa-map-marker" aria-hidden="true"></i> 1 Street. Cape Town. 8000</li>
        </ul>
    </div>  
    <div class="clearfix"></div>         
</footer>

我在下面看到的尝试中使用了媒体查询，但它不起作用

@media(max-width: 600px){
    .footerlogo, .about, .services, .contact, .company{
        display:block;
        color:black; 
        padding:0px;
        margin: 0px;
    } 
}

如何在小型设备中将盒子放在彼此之下？

Answer 1

您的代码存在一些问题： about的类名是错误的。它应该是CSS中的aboutbox。将媒体查询定义更改为此@media only screen and (min-width: 600px)

这些可以解决您的问题。为简单起见，我将div的宽度减小到50％。你仍然可以保持原样。

要获得进一步的帮助，请通过以下小提琴 https://jsfiddle.net/aalok/wjb3prmf/

Answer 2

我测试了你的代码，它运行正常。但是要把你的“约”类名称搞定。在html中，您有class="aboutbox"，在css中您使用了class="about"。我认为问题出在其他地方，你发布的代码对我来说很好。

Answer 3

在您的媒体资源后面添加!important可能会有效。就像这样;

@media(max-width: 600px){
    .footerlogo, .about, .services, .contact, .company{
        display:block !important;
        color:black !important; 
        padding:0px !important;
        margin: 0px !important;
    } 
}

如何使用媒体查询制作响应式页脚

3 个答案: