div无法正确定位在移动设备上

时间:2018-08-02 08:55:28

标签: html css

我的div类信息容器在移动设备上的位置似乎不正确。代码似乎还可以,所以不确定是什么问题。我只希望类信息容器仅在移动设备中的徽标下方。但是,该代码似乎并未发挥作用。  我是html / css

的新手

 .topSection {
    display: flex;
    justify-content: space-between;
    }

    .info-container {
    display: flex;
    flex-direction: column;
    }

    .info {
     display: flex;
     align-items: center;
     } 

      .info img {
      margin-right: 8px;
      }

      @media only screen and (max-width: 600px) {
    .info-container {
        position: relative;
        top:12px;
        left:5px;
        }
        }
    
    <div class="topSection">
    <div class="logo">
    <a href="http://www.elegantcurtainsandblinds.co.uk/index.php"><img 
    src="http://www.elegantcurtainsandblinds.co.uk/images/eg_logo_new.png" 
    alt="Logo"></a>
    </div>
    <div class="info-container">
    <div class="info">
      <img src="http://elegantcurtainsandblinds.co.uk/images/mobile.png" height="30px" width="30px;" />
      <a style="text-decoration:none;color:#2B8C1A;" href="tel:01924724848">Call Us: 01924 724848</a>
    </div><br>

    <div class="info">
      <a href="https://www.google.co.uk/maps/dir/''/elegant+curtains+and+blinds/@53.6967136,-1.7011525,12z/data=!4m8!4m7!1m0!1m5!1m1!1s0x487960059226814f:0x337f355d1975d87c!2m2!1d-1.631113!2d53.696734" target="_blank"><img src="http://elegantcurtainsandblinds.co.uk/images/images.png" height="30px" width="30px;"></a>
      <p style="color:#2B8C1A">Visit Our Showroom</p>
    </div><br>

    <div class="info">
      <a href="https://youtu.be/DAasK7kF2DQ" target="_blank"><img src="http://elegantcurtainsandblinds.co.uk/images/video.png" height="30px" width="30px; target="_blank""></a>
      <p style="color:#2B8C1A">Watch Our Video</p>
    </div>
    </div>
    </div>

5 个答案:

答案 0 :(得分:1)

在媒体查询中添加此CSS

@media only screen and (max-width: 600px){
    .topSection {
       display: unset;
    }
}

答案 1 :(得分:0)

display:block;添加到移动设备的父类 http://prntscr.com/kdq5tq

答案 2 :(得分:0)

由于flex属性,它无法正确显示,请尝试在css下方添加。

@media only screen and (max-width: 600px) {
  .topSection {
    display:block;
  }
}

答案 3 :(得分:0)

console.log (#ENV{localisation, #GET{coord}}) 

请检查此代码是否有效。

答案 4 :(得分:0)

在css代码下方添加移动版式

@media only screen and (max-width: 600px){
.topSection {
    display: block;
    justify-content: space-between;
    clear: both;
    overflow: hidden;
}
.info-container {
    position: relative;
    top: -28px;
    left: 0;
    display: inline-block;
    width: 100%;
    float: left;
    clear: both;
}
.info {
    float: left;
    width: 33%;
}

}